maxphat maxphat - 4 months ago 6
HTML Question

Problems with pushing object into array CSS | JS | HTML

Im creating a module where information (exam information) is stored in an array, and passed through to another js using localstorage. The problem i get is the previous exam always gets overwritten even though i am using .push. All the variables are defined elsewhere. Thanks for the help. Here is the code:

recentexamdb = []
document.getElementById("button1").onclick = function () {
window.scrollTo(0, 0);
document.getElementById("maindiv").style.visibility = "hidden";
document.getElementById("buttondiv").style.visibility = "hidden";
document.getElementById("countdown").style.visibility= "visible";
var yearinput = document.getElementById("yearinput").value;
var minuteinput = document.getElementById("minuteinput").value;
var hourinput = document.getElementById("hourinput").value;
var secondinput = document.getElementById("secondinput").value;
var twentyminutes = new Audio('20mins.mp3');
var tenminutes = new Audio('10mins.mp3');
var fiveminutes = new Audio('5mins.mp3');
var timesup = new Audio('timesup.mp3');
var firstalert = document.getElementById("firstalertinput").value;
var secondalert = document.getElementById("secondalertinput").value;
var thirdalert = document.getElementById("thirdalertinput").value;
var readingalert = document.getElementById("readingalertinput").value;
var timetotal = (Number(hourinput)*60) + Number(minuteinput)
enddate = (new Date().getTime()) + (minuteinput*60000) +(secondinput*1000) + (hourinput*3600000);
var examtypeinput = document.getElementById("examtypeinput").value;
var hours=0;
var minutes=0;
var seconds=0;
var countdown = document.getElementById("countdown");
var examtype = document.getElementById("examtype");

setInterval(function () {
var currentdate = new Date().getTime();
var secondsleft = (enddate - currentdate) / 1000;
// do some time calculations
hours = parseInt(secondsleft / 3600);
secondsleft = secondsleft % 3600;
minutes = parseInt(secondsleft / 60);
seconds = parseInt(secondsleft % 60);
if (hours == 0 && minutes == 0 && seconds == 0) {
document.getElementById("countdowndiv").style.fontFamily = "Helvetica Neue, Arial, sans-serif"
document.getElementById("countdowndiv").style.fontSize = "100%"
countdown.innerHTML = "Time is up! Pens down and wait for further instruction"
examtype.innerHTML = "If you continue to write, marks may be deducted"
var readingtimenow = "No reading time selected"
var timetotalnow = ((hours * 60) + minutes)
var examinfoobject = {
year: yearinput,
examtime: timetotalnow,
timeofexam: Date(),
examtype: examtypeinput,
readingtime: readingtimenow
}
recentexamdb.push(examinfoobject)
console.log(recentexamdb)
localStorage.setItem("storedexamdb", JSON.stringify(recentexamdb))
}
}, 1000);
}

Answer

Correcting the syntax specific to JS, (thanks for pointing out) First initialize the "recentexamdb" from existing value in local storage, otherwise it will always be a new array & earlier saved values may be lost.

recentexamdb=JSON.parse(localStorage.getItem("storedexamdb")); // read  already saved values
 recentexamdb.push(examinfoobject);
 localStorage.setItem("storedexamdb",JSON.stringify(recentexamdb));

On next page, you can Hope this helps.

Comments