Вводите один конкретный элемент массива, когда я нажимаю кнопку остановки

#javascript #arrays #setinterval #clearinterval

#javascript #массивы #setinterval #clearinterval

Вопрос:

Я многократно перебираю массив, моя цель — остановить цикл и распечатать определенный элемент в массиве и отобразить его через 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>  

Комментарии:

1. Ваша проблема неясна, какого поведения вы ожидаете?

2. Можете ли вы описать больше? Каков ваш ожидаемый результат?

3. Если вы хотите, чтобы числа не отображались до тех пор, пока вы не нажмете СТОП, тогда не меняйте innerHTML внутри animate функции, а вместо этого обновляйте только innerHTML внутри stop функции

4. мой код распечатывает все элементы в массиве, он прокручивается по массивам, как система розыгрышей, когда я нажимаю кнопку остановки, я хочу, чтобы код останавливался при распечатке только одного определенного элемента в массиве в качестве победителя.

5. я хочу, чтобы отображались числа, просто я хочу, чтобы прокрутка останавливалась только на определенном номере в массиве, в любое время, когда я нажимаю на стоп

Ответ №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>  

Ответ №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>  

Комментарии:

1. Это не конкретное число и выдаст ошибку, когда я === заголовок. длина-1

2. ? » … чтобы остановиться на определенном номере в массиве, в любое время, когда я нажимаю на остановку »

Ответ №3:

Как насчет этого?

Я изменил числа на фрукты, потому что.. хорошо… Я просто хотел выписать несколько фруктов. Но их можно изменить обратно на числа 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>