www.webdeveloper.com
Results 1 to 4 of 4

Thread: Replace innerHTML of multiple span tags.

  1. #1
    Join Date
    Oct 2008
    Posts
    50

    Replace innerHTML of multiple span tags.

    The code below works just fine. It replaces the innerHTML of a single span tag named "countDown".

    I've tried to edit the code so it adds the countdown numbers to multiple places (span's) on the page but I can't get anything to work. I tried using 'getElementsByClassName' but I cant figure out what the code should be to use a class instead of an id. I'm assuming that would be the best way or I could use multiple id names like: "countDown1", "countDown2", etc.

    Can someone please tell me what I should change?

    The span's that need to show the countdown are not under the same parent div.

    Code:
     <script type="text/javascript">
        <!--
        window.onload = function() {
        startCountDown(120, 1000, myFunction);
        }
        
        function startCountDown(i, p, f) {
        // store parameters
        var pause = p;
        var fn = f;
        // make reference to div
        var countDownObj = document.getElementById("countDown");
        if (countDownObj == null) {
        // error
        alert("div not found, check your id");
        // bail
        return;
        }
        countDownObj.count = function(i) {
        // write out count
        countDownObj.innerHTML = i;
        if (i == 0) {
        // execute function
        fn();
        // stop
        return;
        }
        setTimeout(function() {
        // repeat
        countDownObj.count(i - 1);
        },
        pause
        );
        }
        // set it going
        countDownObj.count(i);
        }
        
        function myFunction() {
        window.setTimeout('window.location="<?php echo $redLink; ?>"; ',2000);
        }
        -->
        </script>
    Last edited by jeffshead; 03-20-2013 at 08:30 PM.

  2. #2
    Join Date
    Oct 2008
    Posts
    50
    I found a JQuery alternative that seems to work OK with multiple span tags with the same class name.

    Code:
    $(function(){
      var count = 10;
      countdown = setInterval(function(){
        $("span.countDown").html(count);
        if (count == 0) {
          window.location = '<?php echo $redLink; ?>';
        }
        count--;
      }, 1000);
    });
    HTML Code:
    <span class="countDown"></span>

  3. #3
    Join Date
    Mar 2013
    Posts
    1
    Hey I think you should use the constructor to manage your count down because It has same name but different data type. Hope it'll be helpful.....

    Regards
    Namrata Singh

  4. #4
    Join Date
    Oct 2008
    Posts
    50
    Quote Originally Posted by lovelynamu View Post
    Hey I think you should use the constructor to manage your count down because It has same name but different data type. Hope it'll be helpful.....

    Regards
    Namrata Singh
    Can you explain in more detail or post example code?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles