javaScript代码在一个单独的文件中工作，但不是更大文件的一部分

javaScript code working in a seperate file but not part of a bigger file

本文关键字：文件 工作 一部分 代码 一个 javaScript 单独      更新时间：2024-03-19

我正在使用localStorage制作一个简单的Goal traking完全离线的HTML5应用程序。

我面临的问题是，检索JSON数据在一个单独的文件中可以完全正常工作，但当作为更大系统的一部分放在一起时就不行了。

我本来会把它放在一个单独的文件里，不再担心它，但由于同源政策，我不能这么做。

以下是作为一个单独的文件运行良好的代码：

<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
window.onload = function(){
// setup
var goal = "CN";
var date2 = new Date();
var diff = 0;
var active = true;http://jsfiddle.net/#save
var data = '{"goals": [{"goal":"' + goal + '","duedate":"'
    + date2 + '","noofdays":"' + diff + '","active":"'
    + active + '"}]}';
localStorage.setItem("goals",data);   
// test
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr); 
for (i=0; i<goalsObj.goals.length; i++) {
  if(goal==goalsObj.goals[i].goal) {
    document.body.appendChild(document.createTextNode(
        "The goal is " + JSON.stringify(goalsObj.goals[i])));
  }
}
}
</script>
</BODY>
</HTML>

现在是应该工作的代码，因为它的所有不同部分都工作得很好，所有语法都是正确的，但它仍然没有给出任何输出：

<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
function save()
{
//Get data from the form
var goal = document.getElementById("goal").value;       //Get 'goal' from form
var date2 = document.getElementById("date2").value;      //Get 'duedate' from the form
var active = document.getElementById("active").value; //Get 'active' from form
//Calculating the number of days remaining
var date1 = new Date();      //Current Date and Time
var dd = date1.getDate();    //Current Date
var mm = date1.getMonth()+1; //January is 0!
var yyyy = date1.getFullYear();  //Current Year
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} date1 = mm+'/'+dd+'/'+yyyy;   //Parsing the date to the required format
var diff =  Math.floor(( Date.parse(date2) - Date.parse(date1) ) / 86400000);    //Calculate no. of days remaining
if (localStorage.getItem('gcount') === null) {
    localStorage.setItem('gcount', "1");
    var data = '{"goals":[{"goal":"'+goal+'","duedate":"'+date2+'","noofdays":"'+diff+'","active":"'+active+'"}]}';
    localStorage.setItem("goals",data);
    //document.getElementById("temp").innerHTML="first";
}
else{
    var goalsStr = localStorage.getItem("goals");
    var goalsObj = JSON.parse(goalsStr);
    var goal = "CN"
    var data = {  "goal": goal,  "duedate": date2,  "noofdays": diff, "active": active};
    goalsObj.goals.push(data);
    localStorage.setItem("goals", JSON.stringify(goalsObj));
}
} 
function load(){
/* // setup
var goal = "CN";
var date2 = new Date();
var diff = 0;
var active = true;http://jsfiddle.net/#save
var data = '{"goals": [{"goal":"' + goal + '","duedate":"'
    + date2 + '","noofdays":"' + diff + '","active":"'
    + active + '"}]}';
localStorage.setItem("goals",data);     */
// test
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr); 
for (i=0; i<goalsObj.goals.length; i++) {
  if(goal==goalsObj.goals[i].goal) {
   document.getElementById("duedate").innerHTML=goalsObj.goals[i].duedate;
   document.getElementById("noofdays").innerHTML=goalsObj.goals[i].noofdays;
   document.getElementById("active").innerHTML=goalsObj.goals[i].active;
   // document.body.appendChild(document.createTextNode("The goal is " + JSON.stringify(goalsObj.goals[i])));
  }
}
} 
</script>
<form name="input" onsubmit="save(); return false;">
<label>Goal: </label> <input type="text" name="goal" id="goal"><br>
<label>Due Date: </label> <input type="date" name="date2" id="date2"></span><br>
<label>Active: </label><br>
<input type="radio" name="active" id="active" value="Future">Future <br>
<input type="radio" name="active" id="active" value="Present">Present <br> <br>
<!-- Submit button to submit the form -->
<input type="submit" value="submit">
</form>
<form name="load" onsubmit="load(); return false;">
<label>Goal: </label> <input type="text" name="goal" id="goal"><br>
<input type="submit" value="submit">
<p id="temp"></p>
<p id="temp1"></p>
<p id="temp2"></p>
<p id="temp3"></p>
<p id="temp4"></p>
<p id="temp5"></p>
<p id="temp6"></p>
<p id="temp7"></p>
<p id="temp8"></p>
<p id="duedate"></p>
<p id="noofdays"></p>
<p id="active"></p>
</BODY>
</HTML>

我得到的错误是对象不是函数。我在StackOverflow上尝试过所有其他类似的问题，但都没有成功。

怎么了？我该怎么办？

您对多个不同的元素使用相同的id。此外，请尝试使用IndexedDB而不是localStorage。

相关文章：