javascript - 如何根据单击的按钮更改代码

Question

我在 HTML 中定义了两个按钮，[男] 和 [女]。

<div class="gender-buttons" id="gender-buttons">
   <button class="male-button">MALE</button>
   <button class="female-button">FEMALE</button>
</div>

我希望按钮的值设置如下

• [Male] = 0.55
• [Female] = 0.68

用户将点击他们的性别，然后将启动一个功能。

<script>
  function calculate(){
    const genderMultiplier = document.getElementById("gender-buttons");
    return genderMultiplier * 100;
  };
</script>

如何将我的 HTML 连接到 JavaScript，以便当用户点击男性时，该函数将在函数中使用 0.55，反之亦然？

Answer 1

您是否尝试过使用 onClick 事件和按钮的 value 属性？

function calculate(target){
   var genderVal = target.value * 100
   console.log(genderVal) // for your information - can remove
   return genderVal
}

<div class="gender-buttons" id="gender-buttons">
   <button class="male-button" value=0.55 onClick="calculate(this)">MALE</button>
   <button class="female-button" value=0.68 onClick="calculate(this)">FEMALE</button>
</div>