JavaScript upTime function - Not recognizing ID of variable
Question
My goal is for calcyear (cyear) to initially start at the value "8". Every time the day count reaches 364, I want a value of "1" to be subtracted from this 8 value, until it reaches zero.
For some reason, the p id does not seem to be recognizing the calcyear id... Or perhaps it is, but the code is in error?
Entire code:
<html>
<style>
#countup p {
display: inline-block;
padding: 0px;
margin: 0 0 10px;
}
#paragraph2 p {
display: inline-block;
padding: 0px;
margin: 0 0 10px;
}
</style>
<div id="countup">
We are in day
<p id="days">00</p>
<p class="timeRefDays">of the calendar. This day has been going on for </p>
<p id="hours">00</p>
<p class="timeRefHours">hours, </p>
<p id="minutes">00</p>
<p class="timeRefMinutes">minutes, and </p>
<p id="seconds">00</p>
<p class="timeRefSeconds"> seconds.</p>
</div>
<div id="paragraph2">
<p>We are in month</p>
<p id="months">00</p>
<p>of the year.</p>
</div>
<div id="paragraph2">
<p>In </p>
<p id="calcyear">0</p>
<p> years an intercalation week will be added.</p>
</div>
<script>
window.onload=function() {
upTime('mar,20,2016,00:00:00');
}
function upTime(countTo) {
now = new Date();
countTo = new Date(countTo);
difference = (now-countTo);
days=Math.floor(difference/(60*60*1000*24)*1);
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
mons=Math.floor(difference/(24*60*60*1000*24)*1);
cyear= 8
years=Math.floor(days / 364)
if (years > 1){ cyear = cyear - 1}
document.getElementById('days').firstChild.nodeValue = days;
document.getElementById('hours').firstChild.nodeValue = hours;
document.getElementById('minutes').firstChild.nodeValue = mins;
document.getElementById('seconds').firstChild.nodeValue = secs;
document.getElementById('months').firstChild.nodeValue = mons;
document.getElementById('years').firstChild.nodeValue = years;
document.getElementById('calcyear').firstChild.nodeValue = cyear;
clearTimeout(upTime.to);
upTime.to=setTimeout(function(){ upTime(countTo); },1000);
}
</script>
</html>
2 answers
solution1
0 2016-07-06 01:27:21
There's no element with the id years , so your code stops there.
Just add <p id="years">0</p> to your code and it should run.
solution2
0 2016-07-06 01:27:41
The problem is on this section of code:
document.getElementById('years').firstChild.nodeValue = years;
In your HTML there isn't an element with the id 'years' , as such you will receive the error:
Uncaught TypeError: Cannot read property 'firstChild' of null
Since there is no such element with the id 'years' , then document.getElementById('years') would return null . This error also stops execution, so the next lines would not run. So because it's after that calcyear isn't updated.
document.getElementById('years').firstChild.nodeValue = years; // Stops
document.getElementById('calcyear').firstChild.nodeValue = cyear; // Not ran
It seems like you intended to add it but may of forgotten:
<div id="paragraph2">
<p>We are in month</p>
<p id="months">00</p>
<p>of the year </p>
<p id="years">00</p> <!-- Added line -->
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.