Update textNode with setInterval and For Loop. Something not working

Question

I am trying to solve this question from w3 resources. QUESTION: Write a JavaScript program to find 1st January is being a Sunday between 2014 and 2050. I tried solving it and attached the code below. I can correctly log the answers but when I am trying to update the textNodes.data with setInterval only the year 2043 but I want it to change through all the years (answers) that are being logged every 100 milliseconds. I guessed there is a for loop and setInterval together thus the problem although the years are being logged correctly the problem remains that the target DOM with id="target" shows

console.log('January 1 Sunday for the following years:');
let getLeaps=(id)=>{

  let target =document.getElementById(id);

  let textNode =target.childNodes[0];

  let text= textNode.data ;

  let dates=new Date();

  for(x=2014;x<=2050;x++){
        dates.setFullYear(x, 01, 01);
        let day = dates.getDay();
       
      if (day==0){
            let year0 = dates.getFullYear()
            
            text=year0;
            console.log(text);

            textNode.data=text;
            console.log(textNode.data);
            
            
          
        
       }

        
    
  }



}

getLeaps('target');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="target"> </p>
    
</body>
</html>

score 0 · Answer 1 · answered Jun 10 '20 at 11:34

0

I will not solve it for you...

few hints:

check setFullYear documentation (January is not "1")
prepare years in an array
print them with set interval (setInterval() clearInterval())

answered Jun 10 '20 at 11:34

Michal Miky Jankovský

3,089
1
35
36

Henrique Sabino · Answer 2 · 2020-06-10T12:33:49.717

As the previous answer said, January is not the the month "1" in the function setFullYear it is the month 0, so you need to change this in your code in order to get the correct results. You also forgot to append the last results to the text data, so your code would only override the value in textNode.data with the last year found that met the requirements, so I changed that to use a +=.

It's also important to clear the value of textNode.data before appending new years because if you run the function getLeaps() in loop it would append the new data to the previous data in the textNode, doing something like this:

2017 2023 2034 2040 2045 2017 2023 2034 2040 2045...

let getLeaps = (id) => {

  let target = document.getElementById(id);

  let textNode = target.childNodes[0];

  let text = textNode.data;

  textNode.data = "";

  let dates = new Date();

  for (x = 2014; x <= 2050; x++) {
    dates.setFullYear(x, 0, 01);
    let day = dates.getDay();

    if (day == 0) {
      let year0 = dates.getFullYear()

      text = year0;
      console.log(text);

      textNode.data += text + ' ';
      console.log(textNode.data);
    }
  }
}

getLeaps('target');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="target"> </p>
    
</body>
</html>

Update textNode with setInterval and For Loop. Something not working

2 Answers2