如何自动化javascript中的指令?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (67)

我想知道如何自动化和简化JavaScript代码。例如,我有3个按钮:

<button id="rock" class="pick" value="rock">rock</button>
<button id="paper" class="pick" value="paper">paper</button>
<button id="scissors" class="pick" value="scissors">scissors</button>

我选择这些元素3次。所以我的问题是如何才能在一个指令或函数中实现它?

var userInput = '';

document.getElementById('rock').onclick = function() {
        userInput = 'rock';
}

document.getElementById('paper').onclick = function() {
        userInput = 'paper';
}

document.getElementById('scissors').onclick = function() {
        userInput = 'scissors';
}

我只是想知道我是否可以做这样的事情:

document.getElementById(element).onclick = function() {
        userInput = element.value;
}
提问于
用户回答回答于

事实上,你可以拥有多个元素,并为它们添加一个事件监听器,这将为你添加它们value。假设你有3个项目,都是上课的gameCommands。然后你会做这样的事情:

const commands = document.querySelectorAll(".gameCommands")
const userInput;
commands.forEach(command => command.addEventListener("click", getValue)

function getValue(){
  // THIS represents the element from which we call the function in this case.
  userInput = this.value;
}
用户回答回答于
inputs = document.getElementsByClassName('pick');

for (let i = 0; i < inputs.length; i++) {
  inputs[i].onclick = function() { userInput = this.value; } 
}

扫码关注云+社区

领取腾讯云代金券