选择选项时如何更改变量的值？

Question

当在 select 中选择每个选项时，我正在尝试更改 javascript 中变量的值。 例如，如果选择了选项 1，则变量的价值为 10，如果选择了选项 2，则变量的价值为 20，依此类推。

我怎样才能做到这一点

var exerciseValue = {
price: 5
}
var noExercise = document.getElementById('noExercise');
noExercise.addEventListener('click', function(){
  exerciseValue.price = -150;
})
var lightExercise = document.getElementById('lightExercise');
lightExercise.addEventListener('click', function(){
  exerciseValue.price = -50;
})
}



<select type="number" id="exerciseInput">
  <option value="noExercise" id="noExercise">Sedentary(little or no exercise)</option>
  <option value="lightExercise" id="lightExercise">Light(1-3 times/week)</option>
  <option value="moderateExercise" id="moderateExercise">Moderate(4-5 times/week)</option>
  <option value="activeExercise" id="activeExercise">Active(daily exercise/intense exercise 3-4 times/week)</option>
  <option value="veryActiveExercise" id="veryActiveExercise">Very Active(intense exercise daily)</option>
  <option value="extraActiveExercise" id="extraActiveExercise">Extra Active(very intense daily or physical activity)</option>
</select>

Answer 1

您要求一些未在代码中实现的值，代码应该如何知道？ 我可以为您提供的解决方案是为每个选项设置一个属性，并使用您要设置为价格的值，因此当您单击该选项时，您可以使用以下代码：

exerciseValue.price = option.attr.data 

其中option.attr.data是这样的

<option value="noExercise" id="noExercise" data=50>Sedentary(little or no exercise)</option>

Answer 2

您在第 12 行的代码中有一个额外的{ 。您还应该将事件侦听器更改为

var exerciseInput = document.getElementById("exerciseInput");
exerciseInput.addEventListener("change", function(evt) {
    var opt = evt.target.value;
    // opt returns the "value" of the <option> elements
    console.log("you chose: " + opt);
    
    if(opt == "noExercise") {
      exerciseValue.price = 10;
    }
    // etc...
});

Answer 3

您可以将事件侦听器添加到 select 并在 select 元素的 value 属性中设置需要减去的值。

 let exerciseCost = 5; const exerciseValues = { "noExercise": 0, "lightExercise": 10, "moderateExercise": 20, "activeExercise": 30, "veryActiveExercise": 40, "extraActiveExercise": 50, } document.querySelector("select").addEventListener("change", (event) => { document.querySelector("input").value = exerciseCost - exerciseValues[event.target.value]; })

 <select type="number" id="exerciseInput"> <option value="noExercise" id="noExercise" data-value="10">Sedentary(little or no exercise)</option> <option value="lightExercise" id="lightExercise" data-value="20">Light(1-3 times/week)</option> <option value="moderateExercise" id="moderateExercise" data-value="30">Moderate(4-5 times/week)</option> <option value="activeExercise" id="activeExercise" data-value="40">Active(daily exercise/intense exercise 3-4 times/week)</option> <option value="veryActiveExercise" id="veryActiveExercise" data-value="50">Very Active(intense exercise daily)</option> <option value="extraActiveExercise" id="extraActiveExercise" data-value="60">Extra Active(very intense daily or physical activity)</option> </select> <div> <input type='text' value="5"/> <div/>