CODEWITHSUNDEEP
javascripthtmllocal-storage
coder
coder

Reputation: 1939

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

I am making a simple Goal-traking completely offline HTML5 app using localStorage.

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.

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.

Here is the code that's working fine as a seperate file:

<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>

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:

<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>

I am getting the error that object is not a function. I have tried all other similar questions on StackOverflow and nothing worked.

What's wrong? What should I do?

Upvotes: 0

Views: 94

Answers (1)

user2134555
user2134555

Reputation:

You are using the same id for multiple different elements. Also, try using IndexedDB instead of localStorage.

Upvotes: 1

Related Questions