If 语句不适用于颜色代码

Question

我的代码说：只要按下 'a' 键，背景就会改变。这不会发生，我认为这是因为 if 语句中的颜色代码。

var colors = ['#ce0e0e', '#079b0c', '#3e3fd6']; //red, green, blue

function changeBackground(){
   document.write("use 'a' key to change background");
   var colorAtRandom = colors[Math.floor(Math.random() * colors.length)];
   document.body.style.backgroundColor = colorAtRandom;
   document.getElementById('button').className = 'hidden'
}

window.addEventListener('keydown', checkKey, false);

function checkKey(key){
   if (key.keyCode == 65){
      if (colorAtRandom != '#ce0e0e'){
         changeBackground();
      } else {
         alert('background is red');
      }
   }
}

.hidden {
    display:none;
}
.show {
    display:block;
}

<input id=button type=button value='change backgound color' onclick='changeBackground()'>

Note by the editor: The original code had the script wrapped in a <script> tag inside <head> with no load event listener. I couldn't reproduce that for the snippet. To see the original code please refer to the revisions.

Answer 1

问题在于范围界定。在函数 checkKey() 中找不到变量 colorAtRandom。使其成为全球性的，它将起作用。

第二个问题是事件侦听器无法正常工作。我更改了它，以便在单击按钮时添加它。因为 document.write 创建了一个新文档，所以您将丢失在加载时创建的事件监听器。所以不建议。

这应该可以解决问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Tester</title>
    <script type="text/javascript">
    var colors = ['#ce0e0e', '#079b0c', '#3e3fd6']; //red, green, blue
 
 var colorAtRandom = colors[Math.floor(Math.random() * colors.length)]; // this variable has to be global.
 
    function changeBackground(){
      //document.write("use 'a' key to change background");  using document.write is not advised. 
      colorAtRandom = colors[Math.floor(Math.random() * colors.length)]; // chose new random color. made it global to get rid of scope
      document.body.style.backgroundColor = colorAtRandom;
      document.getElementById('button').className = 'hidden';
   window.addEventListener('keydown', checkKey, false); // add the event listener when button is pressed. 
    }
    function checkKey(key){
 console.log("test");
      if (key.keyCode == 65){
        if (colorAtRandom != '#ce0e0e'){
          changeBackground();
        } else {
          alert('background is red');
    changeBackground();  // change background after alert so it doesnt get stuck.
        }
      }
    } 
</script>
<style>
  .hidden {
    display:none;
  }
  .show {
    display:block;
  }
</style>
</head>
<body>
<input id=button type=button value='change backgound color' onclick='changeBackground()'>
</body>
</html>

Answer 2

首先 don't use document.write，然后使您的变量 colorAtRandom 成为全局变量。

var colors = ['#ce0e0e', '#079b0c', '#3e3fd6']; //red, green, blue
var colorAtRandom;
    function changeBackground(){
  //    document.write("use 'a' key to change background");
      colorAtRandom = colors[Math.floor(Math.random() * colors.length)];
      document.body.style.backgroundColor = colorAtRandom;
      document.getElementById('button').className = 'hidden'
    }

    window.addEventListener('keydown', checkKey,false);
    function checkKey(key){
    console.log(key.keyCode);
      if (key.keyCode == 65){
        if (colorAtRandom != '#ce0e0e'){
          changeBackground();
        } else {
          console.log('background is red');
        }
      }
    }

  .hidden {
    display:none;
  }
  .show {
    display:block;
  }

<input id="button" type="button" value='change backgound color' onclick='changeBackground()'>

If 语句不适用于颜色代码

If statement not working with color code

javascript

if-statement

background-color

color-codes