How to change the value of a variable when an option is selected?-CodePudding

I am trying to change the value of a variable in javascript when each option is selected in a select. For example if option 1 was selected then the variable would be worth 10, if option 2 was selected then the variable would be worth 20 etc.

How can I do this

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>

CodePudding user response：

You're asking for some value that are not implemented in the code, how is the code supposed to know? The solution I can provide you is to set an attribute to every option with the value you want to set to the price, so when you click on the option you can use the following code:

exerciseValue.price = option.attr.data

where option.attr.data is something like this

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

CodePudding user response：

You have an extra { in your code on line 12. You should also change your event listeners to

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...
});

CodePudding user response：

You can add the event listener to the select and have the value that needs to be subtracted in the value attribute of the select element.

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/>