如何将一个JavaScript元素调用到另一个HTML页面

Question

Here i have a web application which records a users weight and adds it to an array. 在这里，我有一个Web应用程序，它记录用户的体重并将其添加到数组中。 it displays the data once the user presses the 'recent entries' button. 用户按下“最近输入”按钮后，它将显示数据。

It all works fine however i would like to move the 'recent entries' button and 'clear local storage' button to another html page to make it more aesthetically pleasing. 一切正常，但是我想将“最近输入”按钮和“清除本地存储”按钮移动到另一个html页面，以使其在美学上更加令人愉悦。 I am a complete beginner and was wondering if I could call the javascript functions somehow so i could display the array on a separate page. 我是一个完整的初学者，想知道是否可以以某种方式调用javascript函数，以便将数组显示在单独的页面上。

I apologise if the code is uneasy to read, im also new to this site and when i copy and paste my code is warps the structure a little. 如果代码难以阅读，我对此表示歉意，这对本网站来说也是新的，当我复制并粘贴代码时，结构会有些变形。

Be gentle with me, this is not my area. 对我要温柔，这不是我的专长。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Fitness</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="styles.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script>

  function display(form){
        form.o_weight.value = form.weight.value;
    return false;
    }

    //GLOBAL VARIABLES
    var arrayX = 5; //rows
    var arrayY = 2; //columns
    var array = new Array(arrayX);
    var arrayIndex = 0;

    //Create a new local array
    for (x=0; x<array.length; x++){
            array [x] = new Array(arrayY);
    }               

    //If local array already exists set array to localarray         
    if(localStorage["localarray"]){
        array = JSON.parse(localStorage["localarray"]);
        arrayIndex = Number(localStorage.localindex);
    }

    //else initiates a new localarray and localindex
    else{
        localStorage["localarray"] = JSON.stringify(array);
        localStorage.localindex = 0;
    }

    //
    //CLEAR LOCAL STORAGE
    //
    function clearLocal() {
        localStorage.clear();   //Clears the local storage
        location.reload();      //Reloads the page (Stops a bug where the weight values don't disappear)
    }


    //
    //INSERT VALUES INTO ARRAY  
    //
    function insert(val1, val2){
        if (arrayIndex >= arrayX){
            alert("Recent Entries is Full");
            return false;
        }

        //
        // Stops the ability to add an entry without a weight or unit
        //
        if (val1 == 0 || val2 == ""){
            document.getElementById('weight1').value = '';      //Reset the weight to 0 (can delete if you want)
            alert("Please Enter a Weight Correctly!");  
            return false;
        }

        //Adding values to the local array
        array[arrayIndex][0] = val1;
        array[arrayIndex][1] = val2;
        arrayIndex++;

        //Stores the arrayIndex in localStorage
        localStorage.localindex = arrayIndex;

        //localStorage can only deal with strings so use JSON.stringify() to allow this to work
        localStorage['localarray'] = JSON.stringify(array);

        document.getElementById('weight1').value = '';
        document.getElementById('unit').value = 'KG'; <!-- Sets it back to a default of KG -->
    }       

    //
    //SHOW CONTENTS OF ARRAY    
    //
    function show() {
        var string='<b>Weight Entries</b><br>';

        //Access the localStorage array and get its contents    
        array = JSON.parse(localStorage["localarray"]);

        for(i = 0; i < array.length; i++){
            if(array[i][0] != undefined) <!-- Doesnt show empty entries (gets rid of 'undefined') -->
                string+=''+array[i][0]+' '+array[i][1]+'<br>';
        }

        if(array.length > 0)
            document.getElementById('myDiv').innerHTML = string;
    }

</script>


 </head>

<body>
<!-- Loads the weights when the page loads 
//<body onload = "show();">
-->
<header>
    <h1>Weight Tracker</h1>
</header>

    <article>
        <h3>Weight Input</h3>
            <p>Please enter your current weight below and submit.</p>
    </article>

    <div id = "main_content">

        <form name="form1">


    <table align="center" width="407">
        <tr>
            <td width="154" align="right"><b>Weight</b>  </td>
                <td width="9"><b>&nbsp;:</b></td>
            <td width="224">
            <input type="integer" name="weight" id="weight1"/></td>

        <tr>
        </br>
            <td width="154" align="right"><b>Unit</b></td>
            <td width="9"><b>&nbsp;:</b></td>
            <td width="224">

                <!-- Added a selection box instead to get rid of typed mistakes -->
          <select type="string" name="unit" id="unit">
            <option value="KG">KG</option>
            <option value="Lbs">Lbs</option>
            <option value="Stone">Stone</option>

                  </select>
           </td>
        </tr>
    </table>

            </br>

        <table width="407">

     <!--
 // Added show() to onclick so that it will automatically show up when you submit a new weight
  -->
        </br>

        <div id = "submit_container">
    <input id="bigbutton" type="button" value="Submit Weight"
                onclick="insert(this.form.weight.value,this.form.unit.value);show();"
                       />
            </div>         


                <input type="button" value="Recent Entries"
                       onclick="show();"/>

            <!--clears all data in localstorage-->
                <input type="button" value="Clear"
                       onclick="clearLocal();"/>

            </table>
        </form>

        </br>
            <div id="myDiv"></div>
        </br>

        <nav>

        </div>
            <ul>
                <a href="index.html">Home</a> |
                <a href="Progress.html">Your Progress</a>
            </ul>
        </nav>



<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script> 

</body>

</html>

Answer 1

只需将常见的JavaScript函数移动到.js文件，并以与您加入cordova相同的方式将其包含在两个HTML页面中-带有script标签。

如何将一个JavaScript元素调用到另一个HTML页面

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-03 12:33:28

如何将一个JavaScript元素调用到另一个HTML页面

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-03 12:33:28

解决方案1
1 已采纳 2014-01-03 12:33:28