Preint one specific array element, when I click stop button

Question

I am repeatedly looping through an array, my aim is to stop the loop and printout a specific element in the array and display it through span id="fruit". please see code below :

 var title = ['233249864597', '233209425159', '233201112221', '233546056136', '233266549303', '233209409846', '233501345825', '233248446422', '233546112136', '233541006033', '233502089334', '233552476293', '233268222280', '233202240898']; var i = 0; // the index of the current item to show var animate = setInterval(function() { // setInterval makes it run repeatedly document .getElementById('fruit') .innerHTML = title[i++]; // get the item and increment if (i == title.length) i = 0; // reset to first element if you've reached the end }, 15); function stop() { clearInterval(animate); }

 <h1>THE WINNER IS : </h1> <h1><span id="fruit"></span></h1> <center><button onclick="stop()">STOP</button></center>

Answer 1

You mean

 const title = ['233249864597', '233209425159', '233201112221', '233546056136', '233266549303', '233209409846', '233501345825', '233248446422', '233546112136', '233541006033', '233502089334', '233552476293', '233268222280', '233202240898']; const winner = title[3]; // for example var i = 0; // the index of the current item to show var animate = setInterval(function() { // setInterval makes it run repeatedly document .getElementById('fruit') .innerHTML = title[i++]; // get the item and increment if (i == title.length) i = 0; // reset to first element if you've reached the end }, 15); function stop() { clearInterval(animate); document .getElementById('fruit') .innerHTML = winner; }

 <h1>THE WINNER IS : </h1> <h1><span id="fruit"></span></h1> <center><button onclick="stop()">STOP</button></center>

Answer 2

 var title = ['233249864597', '233209425159', '233201112221', '233546056136', '233266549303', '233209409846', '233501345825', '233248446422', '233546112136', '233541006033', '233502089334', '233552476293', '233268222280', '233202240898']; var i = 0; // the index of the current item to show var animate = setInterval(function() { // setInterval makes it run repeatedly //document.getElementById('fruit').innerHTML = title[i++]; // get the item and increment if (i == title.length) i = 0; // reset to first element if you've reached the end }, 15); function stop() { clearInterval(animate); document.getElementById('fruit').innerHTML = title[i++]; }

 <h1>THE WINNER IS : </h1> <h1><span id="fruit"></span></h1> <center><button onclick="stop()">STOP</button></center>

Answer 3

How about this?

I changed the numbers to fruits because.. well... I just wanted to write out some fruits. But they can be changed back to numbers ofc.

 var fruits = ['Apple', 'Banana', 'Pineapple', 'Orange', 'Kiwi', 'Watermelon']; var i = 0; // the index of the current item to show var animate = setInterval(function() { i++ document .getElementById('fruit') // use modulus operator to stay inside array .innerHTML = fruits[i % fruits.length]; }, 15); function stop() { clearInterval(animate); }

 <h1>THE WINNER IS : </h1> <h1><span id="fruit"></span></h1> <center><button onclick="stop()">STOP</button></center>