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

我有两个用HTML定义的按钮，[男]和[女]

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

男性
女性

我希望按钮的值设置如下

• [男]=0.55
• [女性]=0.68

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

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

函数计算（）{
const genderMultiplier=document.getElementById（“性别按钮”）；
返回genderMultiplier*100；
};

---

如何将我的HTML连接到JavaScript，以便当用户单击“男性”时，函数将在函数中使用0.55，而“女性”将在函数中使用0.55？

您可以这样做

在HTML中将性别值传递到函数中

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

function calculate(val){
let genderMultiplier = val * 100;

return genderMultiplier;
};

---

我认为您可以使用

名称-值

对

例如：

男性
女性

然后，通过调用

onclick

处理按钮中的值

函数计算（genderMultipiler）{
让结果=genderMultipiler*100；
返回结果；
};

您是否尝试过使用按钮的

onClick

事件和

value

属性

函数计算（目标）{
var genderVal=target.value*100
console.log（genderVal）//供您参考-可以删除
返回性别
}

男性
女性

在按钮中添加onclick事件，使用该值计算

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

<script>
    function calculate(genderMultiplier){
        genderMultiplier * 100;
        return genderMultiplier; //use this variable where ever you want.
    }
</script>

男性
女性
函数计算（genderMultiplier）{
性别乘数*100；
return genderMultiplier；//在任何需要的地方使用此变量。
}