识别具有相同“onclick”功能名称的不同按钮

Question

我的 HTML 文件中有 3 个按钮具有相同的 onclick 函数名称

    <button id="name 1" onclick="choice()">John</button>
    <button id="name 2" onclick="choice()">Martin</button>
    <button id="name 3" onclick="choice()">Sam</button>

还有一个 JS 文件，它列出了按钮名称，每个名称都有一个 point 属性设置为 0

 let characters = [
   {name: document.getElementById("name 1").textContent, points: 0},
   {name: document.getElementById("name 2").textContent, points: 0},
   {name: document.getElementById("name 3").textContent, points: 0}
];

有没有一种方法可以使函数具有唯一性，即使有一个共同的名称，这样当我单击该按钮时，它会运行一个仅与该按钮相关的函数（对于我的情况，单击 John 只会向他添加一个点并且没有别人了）。另外，如何更改 points 属性的编号，以便每次单击按钮时都会增加 1 分

Answer 1

是的，您可以为每个按钮创建一个运行唯一的函数。

希望这会有所帮助：

一种方法是 :-> 您可以将按钮元素解析为选择函数的参数

let characters = [
   {name: document.getElementById("name 1").textContent, points: 0},
   {name: document.getElementById("name 2").textContent, points: 0},
   {name: document.getElementById("name 3").textContent, points: 0}
];


function choice (button) {
  const buttonCharacterObject = characters.find(obj => obj.name === button.textContent);
  buttonCharacterObject.points += 1;
  
  console.log(characters)
}

<button id="name 1" onclick="choice(this)">John</button>
<button id="name 2" onclick="choice(this)">Martin</button>
<button id="name 3" onclick="choice(this)">Sam</button>

Answer 2

您可以将参数传递给函数，然后处理此参数以执行特定操作。函数语句将如下所示：

choice(parameter){
  if(parameter == "John"){
    characters[0].points = characters[0].points++;
  } else if(parameter == "Martin"){
    characters[1].points = characters[1].points++;
  } else{
    characters[2].points = characters[2].points++;
  }
}

你可以这样调用：

<button id="name 1" onclick="choice("John")">John</button>
<button id="name 2" onclick="choice("Martin")">Martin</button>
<button id="name 3" onclick="choice()">Sam</button>

这样的事情会帮助你。