Бесконечный вызов функции javascript по нажатию кнопки?

ProgramBox

Бесконечный вызов функции javascript по нажатию кнопки?

Post author:admin
Запись опубликована:14 февраля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Хорошо, это немного странный запрос. Итак, я запрограммировал плитки, которые генерируются с использованием JavaScript (с помощью людей здесь, в stack overflow), теперь я хотел бы сделать так, чтобы при нажатии кнопки моя функция changecolors вызывалась определенное количество раз, чтобы цвета плиток случайным образом менялись на ваших глазах. У меня есть кнопка, при каждом нажатии на которую цвета меняются, но как я могу сделать так, чтобы при нажатии они постоянно менялись? Я пытался использовать функцию JavaScript, устанавливающую интервал (функция, время), и, похоже, не смог заставить ее работать. На всякий случай я также сообщу вам, что я добавляю кнопку, которая также остановит случайные изменения цвета.. Вот код. Любая помощь была бы отличной!!

 <!doctype html>
<html>
<style>
.cell {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 1px;
  padding:4px;
}
button{
float:left;
padding:4px;
}
</style>


<title></title>
<head><script type="text/javascript">
function generateGrid(){
  for (i = 0; i < 5; i  ) {
    for (b = 0; b < 5; b  ) { 
      div = document.createElement("div");
      div.id = "box"   i  ""  b;
      div.className = "cell";
      document.body.appendChild(div);
    }
    document.body.appendChild(document.createElement("br"));
  }
}
function changeColors(){
for(i =0;i < 5; i  ){
    for (b=0;b<5;b  ){
        var holder=document.createElement("div");
        holder=document.getElementById("box"   i  ""  b);
        holder.style.backgroundColor = getRandomColor();

    }
}

}
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i   ) {
        color  = letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
</head>


<body>
<script>

generateGrid();

changeColors();


</script>
<button onclick="changeColors();">Click me to change colors</button>
<button onclick="window.setInterval(changeColors(),2000);">Click me to start cycle</button>
</body>





</html>

Ответ №1:

Ваш changeColors() должен был быть changeColors для window.setInterval .

Я очистил ваш код и добавил кнопки остановки / запуска. Создавая массив элементов, это избавляет функцию changeColors от необходимости находить каждый элемент на каждой итерации. Наконец, я изменил вашу функцию generateGrid, чтобы принимать ширину и высоту. Немного перебор, но я увлекся 🙂

HTML

 <button onclick="changeColors();">Click me to change colors</button>
<button onclick="startCycle();">Start cycle</button>
<button onclick="stopCycle();">Stop cycle</button>
<br>
<br>

JavaScript

 var elements = [];
function generateGrid(width, height) {
    for (var y = 0; y < height; y  ) {
        for (var x = 0; x < width; x  ) {
            var div = document.createElement("div");
            div.id = "box"   y   ""   x;
            div.className = "cell";
            document.body.appendChild(div);
            elements.push(div);
        }
        document.body.appendChild(document.createElement("br"));
    }
}

function changeColors() {
    for (e in elements) {
        elements[e].style.backgroundColor = getRandomColor();
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i  ) {
        color  = letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var interval = null;
function startCycle() {
    if (interval) return;
    interval = window.setInterval(changeColors, 500);
}

function stopCycle() {
    clearInterval(interval);
    interval = null;
}

generateGrid(3, 5);
changeColors();

ДЕМОНСТРАЦИЯ

1. Забавно, когда нажимаешь startCycle кучу раз!

2. Это здорово, спасибо за помощь. Вы немного дополнили добавление кнопки остановки для меня, но все в порядке 😉

3. Я рад, что смог помочь. Не забудьте проголосовать / принять ответ

4. Быстрый вопрос о коде, можете ли вы объяснить мне, как вы запрограммировали цикл запуска / остановки? Я в замешательстве из-за всего этого интервала. Это работает, я просто хочу лучше понять это

5. Конечно. Сначала мы объявляем interval переменную. Затем, когда мы вызываем setInterval , мы передаем ему ссылку на функцию changeColors . setInterval возвращает идентификатор, которому мы присваиваем interval . Для stopCycle мы передаем interval (идентификатор) clearInterval . Наконец, мы сбрасываем значение interval to null .

Ответ №2:

Просто просто добавлена одна функция при нажатии кнопки попробуйте это:

 <style>
.cell {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 1px;
  padding:4px;
}
button{
float:left;
padding:4px;
}
</style>


<title></title>
<head><script type="text/javascript">
function generateGrid(){
  for (i = 0; i < 5; i  ) {
    for (b = 0; b < 5; b  ) { 
      div = document.createElement("div");
      div.id = "box"   i  ""  b;
      div.className = "cell";
      document.body.appendChild(div);
    }
    document.body.appendChild(document.createElement("br"));
  }
}
function changeColors(){
for(i =0;i < 5; i  ){
    for (b=0;b<5;b  ){
       // var holder=document.createElement("div");
       var holder=document.getElementById("box"   i  ""  b);
        holder.style.backgroundColor = getRandomColor();

    }
}

}
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i   ) {
        color  = letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
</head>


<body>
<script>

generateGrid();
changeColors();
function animate1()
  {
    setInterval(function(){
      changeColors();
    },5000);
  }

</script>
<button onclick="changeColors();">Click me to change colors</button>
<button onclick="animate1();">Click me to start cycle</button>
</body>

Примечание: функция setTimeout вызывается только один раз после установленной вами продолжительности, где setTimeout вызывается на неопределенный срок, если вы не используете clearInterval(), чтобы остановить ее.

Ответ №3:

Ваша функция setTimeout не была синтаксически корректной

 var stop = false;

function generateGrid(){
  for (i = 0; i < 5; i  ) {
    for (b = 0; b < 5; b  ) { 
      div = document.createElement("div");
      div.id = "box"   i  ""  b;
      div.className = "cell";
      document.body.appendChild(div);
    }
    document.body.appendChild(document.createElement("br"));
  }
}
function changeColors(){
for(i =0;i < 5; i  ){
    for (b=0;b<5;b  ){
        var holder=document.createElement("div");
        holder=document.getElementById("box"   i  ""  b);
        holder.style.backgroundColor = getRandomColor();

    }
}

}
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i   ) {
        color  = letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

document.addEventListener("DOMContentLoaded", function(event) { 
    generateGrid();

    changeColors();
});

 .cell {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 1px;
  padding:4px;
}
button{
float:left;
padding:4px;
}

 <!doctype html>
<html>



<title></title>



<body>

<button onclick="changeColors();">Click me to change colors</button>
<button onclick="window.setInterval(function(){changeColors();},2000);">Click me to start cycle</button>
</body>





</html>

Отредактировано для работы без jQuery

1. Это именно то, что я хочу .. но есть ли способ сделать это без jQuery? Технически я не должен использовать это, иначе я бы это сделал.. Но если я не могу обойтись с помощью jQuery: D

2. Отредактировано для работы без jQuery. Если ответ вам подходит, пожалуйста, примите его как ответ на вопрос