在 HTML5 中多次单击输入按钮

Question

我正在使用 HTML5 和 JavaScript 构建一个骰子游戏。

我希望玩家能够通过单击来选择骰子。这将阻止骰子被掷出。玩家应该能够再次单击骰子按钮，这将允许再次掷骰子。

我已经使用了代码，第一个 onclick 有效，但第二个 onclick 无效。

这是每个输入按钮只能单击一次的限制吗？还是我应该使用输入按钮以外的其他 HTML 标签？

我希望在不重新加载屏幕的情况下玩游戏。

HTML5

<tr>
<th><input type="button" id="diceOne" onclick="selectDice(this.id,this.value)" value="0"></input></th>

<th><input type="button" id="diceTwo" onclick="selectDice(this.id,this.value)" value="1"></input></th>

<th><input type="button" id="diceThree" onclick="selectDice(this.id,this.value)" value="2"></input></th>

<th><input type="button" id="diceFour" onclick="selectDice(this.id,this.value)" value="3"></input></th>

<th><input type="button" id="diceFive" onclick="selectDice(this.id,this.value)" value="4"></input></th>
</tr>

JavaScript

function selectDice(diceName,diceValue){
if (diceArray[diceValue][1]=="y"){
    alert(diceArray[diceValue][1]);
    document.getElementById(diceName).value = "Die now selected";
    diceArray[diceValue][1]="n";
    alert(diceArray[diceValue][1]); 
} 
else {
    alert(diceArray[diceValue][1]); 
    document.getElementById(diceName).value = "Die not selected";
    diceArray[diceValue][1]="y";
    alert(diceArray[diceValue][1]); 
}

}

Answer 1

看来您的代码中可能存在错误。我认为这是正在发生的事情：

1. 您单击第一个骰子，这将导致调用 selectDice，传入 diceName 的 id 和 diceValue 的值；或分别为“diceOne”和“0”。
2. 无论 if 语句遵循哪个路径，您都会执行 document.getElementById(diceName)，这将获取您单击的输入元素（因此在本例中为第一个输入元素），并将值更改为“现在已选择模具”或“未选择模具”。这就是一切出错的地方。
3. 下次您单击该骰子时，它会调用 selectDice，并再次传入 diceName 的 id 和 diceValue 的值...除了这一次，diceName 是“diceOne”，diceValue 是“Die now selected”。由于 diceArray 对象中没有索引“Die now selected”的值，因此一切都从这里开始走下坡路。

我建议在没有“document.getElementById(diceName).value = ...”行的情况下尝试此代码，然后看看它是否有效。如果您确实需要更改 onclick 中的输入元素的值，那么我建议您不要使用内联 onclick，或者传入 diceName 和 diceValue 所需的文字值，如下所示：

<input type="button" id="diceOne" onclick="selectDice('diceOne','0')" value="0"></input>    

Answer 2

为每个按钮创建变量，并为 JavaScript 中的每次点击触发它们 true/false 作为条件，这应该可以修复您的第二次点击；）