Как мне увидеть консоль.войдите в этот код?

#javascript #setinterval #console.log

Вопрос:

 var hexBeat;

function clarity() {
  setInterval(function() {
    function randomNumber(min, max) {
      return Math.random() * (max - min)   min;
      hexBeat = randomNumber(1, 25);
      console.log(hexBeat);
    }
  }, 1000)
}

while (hexBeat <= 20) {
  document.querySelector("#nachoCheddar01").style.backgroundColor = "green";
  document.querySelector("#nachoCheddar01").style.left = "200px";
}

 <html>

<body>

  <button onClick="clarity()" style="z-index:1">click for random number in console</button>
  <div id="nachoCheddar01" style="z-index: -1; box-sizing:border-box;border:3px solid green;background-color: blue;position:absolute;top:1%;height:100px;width:200px;">NachoCheddar01</div>
  <div id="nachoCheddar02" style="">NachoCheddar02</div>
  <div id="nachoCheddar03" style="">NachoCheddar03</div>
  <div id="nachoCheddar04" style="">NachoCheddar04</div>

</body>

</html>

Развернуть фрагмент

Я пытаюсь зарегистрировать hexBeat, затем, исходя из этого, я хотел бы перемещать прямоугольник вправо на экране каждый раз, когда появляется случайное число, меньшее или равное 20, а также изменять его цвет. Но сейчас мне не удается получить console.log (hexBeat)
Я попытался объявить переменную вне какой-либо функции. Я пытаюсь использовать эту переменную, hexBeat внутри другой функции, и у меня был успех, объявляющий мои переменные таким образом. Хотя я использую интервалы, и я не уверен, есть ли лучший способ приблизиться к перемещению прямоугольника каждый раз, когда случайное число меньше или равно 20.

1. JavaScript является однопоточным. Функция интервала не будет выполняться до тех while пор, пока цикл не остановится. Но цикл while не остановится, пока функция интервала не увеличится hexBeat . Вы видите проблему с этим?

2. Поместите то, что вы хотите сделать, в интервальную функцию, а не в отдельный цикл.

3. Кроме того, вызов randomNumber() не должен находиться внутри определения randomNumber() .

4. Как ваш код перемещает прямоугольник вправо? Он просто продолжает устанавливать свою позицию на то же значение.

Ответ №1:

Вы можете обновить свой код следующим образом:

HTML:

 <html>

<body>

  <button onClick="clarity()" style="z-index:1">click for random number in console</button>
  <div class="wrapper">
    <div id="nachoCheddar01" style="z-index: -1; box-sizing:border-box;border:3px solid green;background-color: blue;position:absolute;top:1%;height:100px;width:200px;">NachoCheddar01</div>
    <div id="nachoCheddar02" style="">NachoCheddar02</div>
    <div id="nachoCheddar03" style="">NachoCheddar03</div>
    <div id="nachoCheddar04" style="">NachoCheddar04</div>
  </div>

</body>

</html>

CSS:

 .wrapper {
  position: relative;
}

#nachoCheddar01 {
  position: absolute;
}

JAVASCRIPT:

 var hexBeat;

function clarity() {
  setInterval(function() {
    function randomNumber(min, max) {
      return Math.random() * (max - min)   min;
    }
    hexBeat = randomNumber(1, 25);
    if (hexBeat <= 20) {
      console.log(hexBeat);
      document.querySelector("#nachoCheddar01").style.backgroundColor = "green";
      document.querySelector("#nachoCheddar01").style.left = `${document.querySelector("#nachoCheddar01").offsetLeft   200}px`;
    }
    
  }, 1000)
}

1. При этом поле будет иметь то же значение, что и предложенный Barmar, вам необходимо обновлять css для перемещения вправо при каждом изменении числа

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

3. обновленный код выше, также можно проверить это: jsbin.com/hacenelazu/edit?html ,css,js, вывод

4. nacho04 не движется, хотя я не видел числа, превышающего 60, я попытался сопоставить min с min и max с max, но безуспешно