Javascript: set the timer to run different link every minute

Question

In this program I created object and instances of it and stored those instances in array. I am retrieving array index by getting the modulo of minutes with the length of the array. I am trying to display link in div tag and I should be able to see different link every minute. Upon clicking link it should show different url. and set the timer to run every minute. For that I have created setInterval(). but it doesn't seem to work. Can anyone help me?

code:

<!DOCTYPE html>
<html>
<head>
    <style>

    .myDiv{
        width: 750px;
        height: 150px;
        border: #CED8BC 3px solid;
        border-radius: 20px;
        position: absolute;
        top: 30%;
        left: 20%;
    }

    div p {
        text-align: center;
        font-family: monospace;
        font-size: 30px;
    }

    a{
        text-align: center;
        text-decoration: none;
        color: #3bb570;

    }   

    a:hover{
        color:#efa5db
    }

</style>
<title>lab15</title>

</head>
<body background="lab15_images/pink.jpg">
    <div class="myDiv" id="div">
        <p> Click on the link to see a website. </p>
        <!-- <p><b><a href="#" id="link">  </a></b></p> -->
        <p id="link">  </p>
    </div>

    <script>
        function site(the_url, website_name) {
            this.the_url = the_url;
            this.website_name = website_name;
        }

        var myWebsite = new site("http://www.cnn.com/", "CNN");
        var myWebsite2 = new site("http://www.bbc.com/news", "BBC");
        var myWebsite3 =  new site("http://www.foxnews.com/", "FOX NEWS");
        var myWebsite4 =  new site("http://abcnews.go.com/", "ABC NEWS");
        var myWebsite5 =  new site("https://www.cbsnews.com/", "CBS NEWS");

        var instances = new Array(myWebsite, myWebsite2, myWebsite3, myWebsite4, myWebsite5);


        setInterval(changeLink, 60000);

        function changeLink() {

            var n = new Date().getMinutes();
            var index = n % instances.length
            var site = instances[index] 
            var counter = 0;

            var ele = document.getElementbyId("link");
            ele.innerHTML = instances[counter];
            counter++;

            if(counter >= instances.length) {
                counter = 0;
            }

            var a = document.createElement('a');
            var myDiv = document.getElementbyId("div");
            a.href = site.the_url;
            a.innerHTML = site.website_name
            myDiv.appendChild(a);
            document.body.appendChild(myDiv);

        }

    </script>
</body>
</html>

Answer 1

Fixed your semicolons and getElementById typos. Here is the working code.

 function site(the_url, website_name) { this.the_url = the_url; this.website_name = website_name; } var myWebsite = new site("http://www.cnn.com/", "CNN"); var myWebsite2 = new site("http://www.bbc.com/news", "BBC"); var myWebsite3 = new site("http://www.foxnews.com/", "FOX NEWS"); var myWebsite4 = new site("http://abcnews.go.com/", "ABC NEWS"); var myWebsite5 = new site("https://www.cbsnews.com/", "CBS NEWS"); var instances = new Array(myWebsite, myWebsite2, myWebsite3, myWebsite4, myWebsite5); // call changeLink once to display on page load changeLink(); // interval changed to 3 seconds so that you dont need to wait a minute for the result setInterval(changeLink, 3000); function changeLink() { var n = new Date().getMinutes(); var index = n % instances.length; var site = instances[index]; var counter = 0; var ele = document.getElementById("link"); counter++; if (counter >= instances.length) { counter = 0; } var a = document.createElement('a'); var myDiv = document.getElementById("div"); a.href = site.the_url; a.innerHTML = site.website_name; ele.innerHTML = ''; ele.appendChild(a); }

 .myDiv { width: 750px; height: 150px; border: #CED8BC 3px solid; border-radius: 20px; position: absolute; top: 30%; left: 20%; } div p { text-align: center; font-family: monospace; font-size: 30px; } a { text-align: center; text-decoration: none; color: #3bb570; } a:hover { color: #efa5db }

 <!DOCTYPE html> <html> <head> <style> </style> <title>lab15</title> </head> <body background="lab15_images/pink.jpg"> <div class="myDiv" id="div"> <p> Click on the link to see a website. </p> <!-- <p><b><a href="#" id="link"> </a></b></p> --> <p id="link"> </p> </div> </body> </html>

Answer 2

Move var counter = 0; out of the function.

Also, as @guest271314 pointed, you have to capitialize the by in:

var ele = document.getElementById("link");
/* ... */
var myDiv = document.getElementbyId("div");

Final code:

var counter = 0;

function changeLink() {

  var n = new Date().getMinutes();
  var index = n % instances.length
  var site = instances[index]
  //var counter = 0;

  var ele = document.getElementById("link");  //Capitalize By
  ele.innerHTML = instances[counter];
  counter++;

  if (counter >= instances.length) {
    counter = 0;
  }

  var a = document.createElement('a');
  var myDiv = document.getElementById("div"); //Capitalize By
  a.href = site.the_url;
  a.innerHTML = site.website_name
  myDiv.appendChild(a);
  document.body.appendChild(myDiv);

}

Javascript: set the timer to run different link every minute

Question

2 answers

solution1
1 ACCPTED 2017-10-14 07:49:57

solution2
0 2017-10-14 07:38:33

Javascript: set the timer to run different link every minute

Question

2 answers

solution1 1 ACCPTED 2017-10-14 07:49:57

solution2 0 2017-10-14 07:38:33

solution1
1 ACCPTED 2017-10-14 07:49:57

solution2
0 2017-10-14 07:38:33