Preint一個特定的數組元素，當我點擊停止按鈕

Question

我反復循環遍歷一個數組，我的目標是停止循環並打印出數組中的特定元素並通過 span id="fruit" 顯示它。 請看下面的代碼：

 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

你的意思是

 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

這個怎么樣？

我把數字改成了水果，因為……好吧……我只是想寫出一些水果。 但它們可以改回 number 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>