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

是的，您可以使每个按钮都具有唯一功能的功能。

希望这会有所帮助：

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

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>

这样的事情会帮助您。

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

2 个答案: