Question

我正在制作一个涉及数字的游戏。这个想法很简单，如果我点击一个数字（从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>

我应该反复编写每个函数，这几乎是一样的！我如何使用参数，而只涉及一个功能。 我怎样才能添加“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的新手）。

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

Answer 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

Answer 3

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

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

详细了解这个问题和答案：

How to get ID of button user just clicked?

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

3 个答案: