具有多个参数的单击分配功能答案

【问题标题】：On-click assigned function with multiple parameters具有多个参数的单击分配功能
【发布时间】：2018-04-16 15:08:16
【问题描述】：

我正在创建一个涉及数字的游戏。这个想法很简单，如果我点击一个数字（从 1 到 6）并且我的代码随机选择一个（也从 1 到 6）。如果我的选择（onclick）等于cpu的选择，游戏就结束了！如果它们都是不太可能的数字，我的分数会加起来！

现在的问题是，如果我点击“1”或“2”..（等等）我需要一个非常新的函数来处理所有的数字。

代码是这样的，

<button id="runs" onclick="i0()">0</button>
<button id="runs" onclick="i1()">1</button>
<button id="runs" onclick="i2()">2</button>
<button id="runs" onclick="i3()">3</button>
<button id="runs" onclick="i4()">4</button>
<button id="runs" onclick="i5()">5</button>
<button id="runs" onclick="i6()">6</button>

我应该重复编写几乎相同的每个函数！我怎样才能使用 parameters 而只涉及一个功能。 我怎样才能添加一个“if”语句，其中条件应该说我点击了“1”.etc

喜欢，

if(Clicked one//for example) {
    document.getElementById("someId").innerHTML = "You pressed one";//:ex
}

我可以用吗，

function click(i0, i1, i2//etc)
if(i0 == true) {
    //some code
}

请记住！我需要使用参数（我是 JavaScript 新手）。

【问题讨论】：

标签： javascript dom parameters

【解决方案1】：

首先，您不应该使用 HTML 事件属性来设置您的事件处理程序，因为该技术已有 20 多年的历史并且有 many reasons not to use it（其中一个是您最终会编写大量冗余事件处理程序像你现在一样打电话）。

请记住！我需要使用参数

不，您不需要（除非这是您未说明的某种学校作业 - 如果是这种情况，请退还您的课程费用，因为讲师不应该教您过时的方法编写代码，即使是为了学习目的）。 每个按钮都已经显示了与其对应的数字。使用参数只是代码中的更多冗余，这使得解决方案更加脆弱。您只需要一个在单击任何按钮时运行的集中式函数，然后该函数可以简单地将随机数与单击按钮的内容进行比较。

另外，您不能有多个元素具有相同的id。

请注意，当您将事件处理程序从 HTML 中分离出来时，HTML 的简洁程度，并注意无论您希望游戏有多少按钮，此解决方案都有效。只需确保游戏中的任何按钮都具有gameButton 类，并且元素的内容是下一个尚未使用的数字字符。

// Get all buttons into an Array
var buttons = Array.prototype.slice.call(document.querySelectorAll("button.gameButton"));

// Loop over the buttons
buttons.forEach(function(btn){

  // Give each button a click event callback function
  btn.addEventListener("click", function(){
  
    // Generate a random number from 1 to the number of buttons there are in the game
    var num = Math.floor(Math.random() * buttons.length) + 1 ;
    
    var output = "The random was: " + num + ", and the clicked button was: " + this.textContent;
    
    // The prepended + converts the text to a number
    if(num === +this.textContent){
      alert("You win!\n" + output);
    } else {
      alert("Keep trying!\n" + output);
    }    
  });
});

/* Just for fun */
.gameButton{
  background-color:#800080;
  color:#ff0;
  font-weight:bold;
  font-size:2em;
  border-radius:2em;
  box-shadow:2px 2px #808080;
  outline:none;
}

.gameButton:active{
  box-shadow:-2px -2px #808080;
}

<button class="gameButton">1</button>
<button class="gameButton">2</button>
<button class="gameButton">3</button>
<button class="gameButton">4</button>
<button class="gameButton">5</button>
<button class="gameButton">6</button>

【讨论】：

非常感谢您抽出宝贵的时间！

【解决方案2】：

您不需要为每个按钮设置单独的函数。可以直接给函数调用语句传一个参数：

<button id="runs" onclick="i(0)">0</button>
<button id="runs" onclick="i(2)">1</button>
...

然后在你的 JS 代码中：

function i(param) {
  ...
}

在此处阅读更多信息：https://www.w3schools.com/js/js_functions.asp

【讨论】：

【解决方案3】：

如前所述，您不能在多个元素上使用相同的 ID。

一个好的方法是拉取按钮的 id 并将其传递给函数，如下所示：

详细查看其他问题和答案：

How to get ID of button user just clicked?

【讨论】：