How to run 2 similar Javascript functions on the same page

Question

I have a page that is split into sections and 2 of the sections show images. At first I wanted to show a static image in one section and a rotating image in the other which I have done. But I would now like to have both sections running their own set of rating images, so rotator1 would show images 1-6 and rotator 2 would show images 7-12. With some trial and error I can get it so that section 1 shows rotator 1 and then section 2 show rotator 2 and then goes back to section 1 and so forth.

I would like to get section 1 and section 2 to show their rotators at the same time.

Below are the extracts of my code so far:

<div id="pay-slides">

<script type="text/javascript">
        window.onload = function(){
            window.displayImgCount = 0;
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("img" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
                document.getElementById("img" + displayImgCount).style.display = "block";
                setTimeout(cycleImage, 5000);
            }
            cycleImage();
        }


    </script>

    <img id="img1" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="img2" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="img3" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="img4" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="img5" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="img6" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
</div>


<div id="adv-slides">

<script type="text/javascript">
        window.onload = function(){
            window.displayImgCount = 0;
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("img" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 12 ? 7 : displayImgCount + 1;
                document.getElementById("img" + displayImgCount).style.display = "block";
                setTimeout(cycleImage(), 5000);
            }
            cycleImage();
        }
    </script>

    <img id="img7" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="img8" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="img9" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="img10" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="img11" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="img12" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
</div>

Thanks in advance for any help.

Peter.

score 0 · Answer 1 · answered Nov 20 '15 at 12:24

There is two major problems in you code. First, you are overriding the onload handler. You need to wrap your two functions in a parent function and then place it on the onload. Second, you are abusing global scope and clobber your state. This can be seen with the two uses of window.displayImgCount. Thirdly, keep your image ids separate for easier to debug code.

<div id="pay-slides">

<script type="text/javascript">
        function initPaySlides(){
            //window.displayImgCount = 0;
            var displayImgCount = 0; //scoped to this function
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("imgPay" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
                document.getElementById("imgPay" + displayImgCount).style.display = "block";
                setTimeout(cycleImage, 5000);
            }
            cycleImage();
        }


    </script>

    <img id="imgPay1" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="imgPay2" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="imgPay3" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="imgPay4" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
    <img id="imgPay5" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image1.jpg" style="display: none">
    <img id="imgPay6" src="E:\HTMLCustomerDisplay - Shop\app\img\pay-image2.jpg" style="display: none">
</div>


<div id="adv-slides">

<script type="text/javascript">
        function initAdvSlides(){
            //window.displayImgCount = 0;
            var displayImgCount = 0; //scoped to this function
            function cycleImage(){
                if (displayImgCount !== 0) {
                    document.getElementById("imgAdv" + displayImgCount).style.display = "none";
                }
                displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
                document.getElementById("imgAdv" + displayImgCount).style.display = "block";
                setTimeout(cycleImage(), 5000);
            }
            cycleImage();
        }

        window.onload = function(){
          initPaySlides();
          initAdvSlides();
        }
    </script>

    <img id="imgAdv1" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="imgAdv2" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="imgAdv3" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="imgAdv4" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
    <img id="imgAdv5" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image1.jpg" style="display: none">
    <img id="imgAdv6" src="E:\HTMLCustomerDisplay - Shop\app\img\adv-image2.jpg" style="display: none">
</div>

score 0 · Answer 2 · answered Nov 20 '15 at 12:52

How you use this code is upto you :) this is a start

        window.onload = function() {
          window.displayImgCount = 0;
          window.displayImgCount1 = 7;

          function cycleImage() {
            if (displayImgCount !== 0 && displayImgCount1 !== 0) {
              document.getElementById("img" + displayImgCount).style.display = "none";
              document.getElementById("img" + displayImgCount1).style.display = "none";
            }
            displayImgCount = displayImgCount === 6 ? 1 : displayImgCount + 1;
            displayImgCount1 = displayImgCount1 === 12 ? 1 : displayImgCount1 + 1
            console.log(displayImgCount);
            console.log(displayImgCount1);
            document.getElementById("img" + displayImgCount).style.display = "block";
            document.getElementById("img" + displayImgCount1).style.display = "block";
            setTimeout(cycleImage, 5000);
          }
          cycleImage();
        }

<div id="pay-slides" style="border:1px solid">
  <img id="img1" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_withAndrew.jpg" style="display: none">
  <img id="img2" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider1.jpg" style="display: none">
  <img id="img3" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
  <img id="img4" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_YJWisdomWarriors.jpg" style="display: none">
  <img id="img5" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_prayer.jpg" style="display: none">
  <img id="img6" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
</div>


<div id="adv-slides" style="border:1px solid">
  <img id="img7" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_withAndrew.jpg" style="display: none">
  <img id="img8" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider1.jpg" style="display: none">
  <img id="img9" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
  <img id="img10" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_YJWisdomWarriors.jpg" style="display: none">
  <img id="img11" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider_prayer.jpg" style="display: none">
  <img id="img12" src="http://www.desireerumbaugh.com/wp-content/uploads/2013/04/Slider5.jpg" style="display: none">
</div>

How to run 2 similar Javascript functions on the same page

2 Answers2