如何查看此代码中的 console.log？

Question

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 的随机数时移动矩形。

Answer 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)
}

如何查看此代码中的 console.log？

How do I see the console.log in this code?

javascript

setinterval

console.log