带有函数 javascript/html 的索引数组答案

【问题标题】：Index Array with function javascript/html带有函数 javascript/html 的索引数组
【发布时间】：2018-05-13 03:08:38
【问题描述】：

我已经在 freeCodeCamp 上进行了一段时间的“Simon Says”练习，因为我努力寻找自己对每种代码结构的理解。

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

结果是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？

【问题讨论】：

在数组中存储函数结果。因为你在做 ();你没有存储函数本身

标签： javascript html

【解决方案1】：

以下几点可帮助您克服困难并了解您的代码发生了什么。

分配函数引用与执行函数

您正在尝试将每个函数（红色、蓝色等）的引用分配给“simonArr”数组中的索引；但是，您实际上是在执行每个函数并将每个函数的结果分配给这些索引。

simonArr[0] = red();

执行名称“red”引用的函数，并将未定义的结果分配给索引 0 处的数组“simonArr”，因为“red”函数不返回任何内容，所以该结果未定义。括号 () 是什么使函数执行。

simonArr[0] = red;

会做你想做的事。它将获取名称“red”引用的函数，并将对该函数本身的引用分配给索引 0 处的“simonArr”，并且它不会执行该函数。

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

您的“onclick”代码可以正常工作，但它似乎无法正常工作。这是因为当您单击按钮时，您的函数（红色、蓝色等）已经被调用，并在此处将按钮的不透明度设置为 25%：

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

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

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

我稍微更改了您的代码以证明这两点：

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

  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";
  }

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

<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>

“onclick”处理程序中发生了什么？

好吧，'simonArr' 数组的每个索引现在都引用了您的一个函数。例如red 和simonArr[0] 现在引用相同的函数。所以，这句话：

red();

...还有这句话：

simonArr[0]();

...会做同样的事情。两者都引用相同的函数，并且括号的添加将导致该函数执行。希望对大家有所帮助。祝您继续探索顺利！

【讨论】：

谢谢！我很抱歉，仅仅学习概念不仅对我有帮助，对其他人也有帮助。这就是我发布这个问题的原因。我从学校和营地以及其他人那里吸取了教训，他们变得困惑。我实际上发现了大约 20 分钟的原因。之后，您又清楚地执行了。然后我决定写下我在每个问题上所犯的所有错误，以帮助那些人一路学习。我希望这不会让任何人感到不安，我只是为其他人放置“self console.logs”。所有向你学习的人都感谢你！