Adding HTML button to handle incrementation over element within a from within a looping array

Question

4I'm currently working on a HTML code for a presentation that changes image based on a javascript array.

I managed to incorporate a looping code from a friend into my code, but I don't understand how to only make the image change once.

At the moment, it works that the javascript loops the items in the array to display different images, but I'd like it to work that it only changes once, based on a button click.

I'd like to keep my array if possible. Here's the code:

<html>

<head>
  <script type='text/javascript'>
    var banners = ["banner1.png", "banner2.png", "banner3.png"
      "banner4.png"
    ];
    var bnrCntr = 0;
    var timer;

    function banCycle() {
      if (++bnrCntr == 4)
        bnrCntr = 0;

      timer = setTimeout("banCycle()", 4000);
    }

    function stopCycle() {
      clearTimeout(timer);
    }
  </script>
</head>

<body>
  <img src="bannerad1.png" name="banner" width=110 height=200>

  <form>
    <input type="button" value="Cycle" name="Cycle" onclick="banCycle()">
    <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
  </form>
</body>

</html>

Thank you in advance!

EDIT- Just to clarify, I'm limited to pure javascript/HTML, and therefore I cannot use JSQuery.

Sounds like you want a button to advance to the next image? And doesn't cycle through the remainder of the array? — EnigmaRM
– EnigmaRM, Commented Dec 7, 2015 at 19:48
@Fabricator It didn't work, and anyway, I'm looking for it to work on a button click, removing the timeout for the loop is still going to make it loop. — Master-chip
– Master-chip, Commented Dec 7, 2015 at 19:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The basic idea can be seen here in this JSFIDDLE

HTML

<img id="banner" src="http://placehold.it/350x150">
<button onclick="next()">
  Next Image
</button>

JavaScript

var banners = ["http://placehold.it/350x150", "http://placehold.it/400x200", "http://placehold.it/300x100"]
var counter = 1;

function next() {
  if (counter >= banners.length){
    counter=0;
  }
  document.images.banner.src = banners[counter];
  counter++;
}

What you want to do is remove all of your cycle stuff. You can keep your Counter (what you have named bnrCntr). All you have to do is increment the counter by one each time the button is clicked.

By this logic, it would also be very easy to implement a "back" button that decrements the counter

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 7, 2015 at 19:58

EnigmaRM

7,61211 gold badges48 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DinoMyte · Accepted Answer · 2015-12-07 20:03:18Z

1

You can make use of .one() event in jquery. It would trigger the click event only once.

<script>
  $().ready(function(){
    var banners = ["banner1.png","banner2.png","banner3.png""banner4.png"];
    var bnrCntr = 0;
    var timer;
    $('input:button[name=Cycle]').one("click",function()
    {
      if(++bnrCntr == 4)
      bnrCntr = 0;

      document.images.banner.src = banners[bnrCntr];

      timer = setTimeout("banCycle()",1000);
    });

    $('input:button[name=Stop]').one("click",function()
    {
      clearTimeout(timer);
    });
});
    </script>

For a non jquery ( pure javascript ), just do a "return false". It would prevent further processing.

var banners = ["banner1.png","banner2.png","banner3.png""banner4.png"];
var bnrCntr = 0;
var timer;
var executedBanCycle = false;
var executedStopCycle = false;

function banCycle(e)
{
  if(executedBanCycle)
      return false;

  executedBanCycle = true;
  alert("Execute BanCyle");
  if(++bnrCntr == 4)
  bnrCntr = 0;

  document.images.banner.src = banners[bnrCntr];

  timer = setTimeout("banCycle()",1000);       

}

function stopCycle(e)
{
    if(executedStopCycle)
       return false;  
  executedStopCycle = true;
  alert("Execute stopCyle");
   clearTimeout(timer);

}

Example : http://jsfiddle.net/f5xn7zhk/

edited Dec 7, 2015 at 20:03

answered Dec 7, 2015 at 19:50

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

1 Comment

Master-chip Over a year ago

That sounds great! However, I'm currently limited to pure javascript/HTML coding.

Collectives™ on Stack Overflow

Adding HTML button to handle incrementation over element within a from within a looping array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related