Question

我一直在freeCodeCamp上进行'Simon Says'练习一段时间，因为我努力找到自己对每个代码结构的理解。

今天我尝试了一个Array Elements对象结构，它允许你在一个数组中有一个函数。

结果是onclick的规则被索引规则推翻：

   <body>
     <h2 id="clickNumber">0</h2>
     <button id="red1" onclick="red()"></button>
     <button id="blue1" onclick="blue()"></button>
     <button id="green1" onclick="green()"></button>
     <button id="yellow1" onclick="yellow()"></button>
<script> 
   var simonArr = [];
       simonArr[0] = red();
       simonArr[1] = blue();
       simonArr[2] = green();
       simonArr[3] = yellow();

 function red(){
   setInterval( function(){
    document.getElementById('red1').style.opacity = ".25";
  }, 4000);
 }

  function blue(){
   document.getElementById('blue1').style.opacity = ".25";
  }
 function green(){
   document.getElementById('green1').style.opacity = ".25"
  }
  function yellow(){
   document.getElementById('yellow1').style.opacity = ".25"
 }
   </body>
</html>

这些功能在没有点击的情况下自动运行，并产生错误的响应。

我的下一步是弄清楚为什么这个索引规则会覆盖onclick？

Answer 1

以下几点可以帮助您克服困难并了解代码的用途。

分配函数引用与执行函数

您正在尝试将每个功能（红色，蓝色等）的引用分配给“simonArr”中的索引。阵列;但是，您实际上 正在执行 这些功能，并将每个功能的结果分配给这些索引。

simonArr[0] = red();

执行名称＆＃39; red＆＃39;引用的功能。并指定结果，这是未定义的，因为＆＃39; red＆＃39;函数没有返回任何东西，到数组＆＃39; simonArr＆＃39;索引为0.括号()是导致函数执行的原因。

simonArr[0] = red;

会做你想做的事。它将采用名称＆＃39; red＆＃39;引用的功能。并将函数本身的引用分配给＆＃39; simonArr＆＃39;在索引0处，它不会执行该函数。

为什么你的onclick似乎没有执行

你的onclick＆＃39;代码可以正常工作，但它不会出现。这是因为当您点击按钮时，您的功能（红色，蓝色等）已被调用，并将按钮的不透明度设置为25％：

var simonArr = [];
   simonArr[0] = red();
   simonArr[1] = blue();
   simonArr[2] = green();
   simonArr[3] = yellow();

删除括号()，您将看到按钮点击的预期效果。

修改您的示例以帮助澄清所有这些

我稍微更改了您的代码以演示这两点：

我从函数调用
我更改了你的onclick处理程序以引用你存储的函数引用（见下文）
我添加了控制台日志记录，以帮助您查看何时执行这些调用。如果您还没有使用过控制台日志记录，我强烈建议您在学习时帮助您。查看您喜欢的浏览器的开发者工具。

＆＃13;

  var simonArr = [];
  simonArr[0] = red;
  simonArr[1] = blue;
  simonArr[2] = green;
  simonArr[3] = yellow;

  function red(){
    console.log('red was executed!');
    setInterval( function(){
      console.log('the delayed function called was executed');
      document.getElementById('red1').style.opacity = ".25";
    }, 4000);
  }

  function blue(){
    console.log('blue was executed!');
    document.getElementById('blue1').style.opacity = ".25";
  }
  function green(){
    console.log('green was executed!');
    document.getElementById('green1').style.opacity = ".25";
  }
  function yellow(){
    console.log('yellow was executed!');
    document.getElementById('yellow1').style.opacity = ".25";
  }

＆＃13;

  button { padding: 1em; }
  #red1 { background-color: red; }
  #blue1 { background-color: blue; }
  #green1 { background-color: green; }
  #yellow1 { background-color: yellow; }

＆＃13;

<button id="red1" onclick="simonArr[0]()">Red</button>
<button id="blue1" onclick="simonArr[1]()">Blue</button>
<button id="green1" onclick="simonArr[2]()">Green</button>
<button id="yellow1" onclick="simonArr[3]()">Yellow</button>

＆＃13;

＆＃39; onclick＆＃39;中发生了什么？处理程序？

嗯，你的＆＃39; simonArr＆＃39;的每个索引。数组现在引用您的一个函数。因此，例如red和simonArr[0]现在引用相同的函数。所以，这句话：

red();

......和这句话：

simonArr[0]();

...会做同样的事情。两者都引用相同的函数，并且括号的添加将导致该函数执行。希望一切都有所帮助。祝你好运继续探索！

具有函数javascript / html的索引数组

1 个答案:

分配函数引用与执行函数

为什么你的onclick似乎没有执行

修改您的示例以帮助澄清所有这些

＆＃39; onclick＆＃39;中发生了什么？处理程序？