Databases
StackOverflow2013
Postsdbo
POjavaScript code working in a seperate file but not part of a bigger file
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjavaScript code working in a seperate file but not part of a bigger file
    text
    copied!<p>I am making a simple Goal-traking completely offline HTML5 app using localStorage.</p> <p>The problem that I am facing is, that, Retrieving JSON data is working completely fine in a separate file but not when put together as a part of a bigger system.</p> <p>I would have kept it in a seperate file and would have stopped worrying about it, but I can't do that because of same-origin policy.</p> <p>Here is the code that's working fine as a seperate file:</p> <pre><code>&lt;HTML&gt; &lt;HEAD&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;script type="text/javascript"&gt; 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&lt;goalsObj.goals.length; i++) { if(goal==goalsObj.goals[i].goal) { document.body.appendChild(document.createTextNode( "The goal is " + JSON.stringify(goalsObj.goals[i]))); } } } &lt;/script&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>and now here is the code that is supposed to work, as all of it's different parts are working fine, all the syntax is correct, but still it is giving absolutely no output:</p> <pre><code>&lt;HTML&gt; &lt;HEAD&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;script type="text/javascript"&gt; 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&lt;10){dd='0'+dd} if(mm&lt;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&lt;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]))); } } } &lt;/script&gt; &lt;form name="input" onsubmit="save(); return false;"&gt; &lt;label&gt;Goal: &lt;/label&gt; &lt;input type="text" name="goal" id="goal"&gt;&lt;br&gt; &lt;label&gt;Due Date: &lt;/label&gt; &lt;input type="date" name="date2" id="date2"&gt;&lt;/span&gt;&lt;br&gt; &lt;label&gt;Active: &lt;/label&gt;&lt;br&gt; &lt;input type="radio" name="active" id="active" value="Future"&gt;Future &lt;br&gt; &lt;input type="radio" name="active" id="active" value="Present"&gt;Present &lt;br&gt; &lt;br&gt; &lt;!-- Submit button to submit the form --&gt; &lt;input type="submit" value="submit"&gt; &lt;/form&gt; &lt;form name="load" onsubmit="load(); return false;"&gt; &lt;label&gt;Goal: &lt;/label&gt; &lt;input type="text" name="goal" id="goal"&gt;&lt;br&gt; &lt;input type="submit" value="submit"&gt; &lt;p id="temp"&gt;&lt;/p&gt; &lt;p id="temp1"&gt;&lt;/p&gt; &lt;p id="temp2"&gt;&lt;/p&gt; &lt;p id="temp3"&gt;&lt;/p&gt; &lt;p id="temp4"&gt;&lt;/p&gt; &lt;p id="temp5"&gt;&lt;/p&gt; &lt;p id="temp6"&gt;&lt;/p&gt; &lt;p id="temp7"&gt;&lt;/p&gt; &lt;p id="temp8"&gt;&lt;/p&gt; &lt;p id="duedate"&gt;&lt;/p&gt; &lt;p id="noofdays"&gt;&lt;/p&gt; &lt;p id="active"&gt;&lt;/p&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>I am getting the error that object is not a function. I have tried all other similar questions on StackOverflow and nothing worked.</p> <p>What's wrong? What should I do?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload