How can I change the value of a variable based on which option is chosen?-CodePudding

I am trying to make a select where the value of a variable changes based on the option chosen. I have made a function to change the value depending on which option is chosen but it doesn't work and I don't know why.

Can anyone help? Thanks

let exerciseValue = {
price: 0
}

function exerciseFunction() {
if (document.getElementById('exerciseInput').value == 'Inactive')
{
  exerciseValue.price = 150;
}
}


<select type="number" id="exerciseInput" >
  <option>Exercise</option>
  <option value="noExercise" id="noExercise">Inactive</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 are not calling the function at all, instead of type onchange="exerciseFunction()" class attribute is for css so the way you trying to call the function is completly wrong,

another way to call the function is

document.querySelector('#exerciseInput').addEventListener('change', ()=> {
   exerciseFunction()
});

CodePudding user response：

The value property that you are using in this document.getElementById('exerciseInput').value == 'Inactive' refers to value property of each option in select, not the displayed text in that option. So this line should look like this for the first option: document.getElementById('exerciseInput').value = 'noExercise'. But the better way is to use switch statement for that

function exerciseFunction() {
switch (document.getElementById('exerciseInput').value) {
    case 'noExercise': exerciseValue.price = 150; break
    case 'lightExercise': exerciseValue.price = 200; break
    // other options
}

}

Also as mentioned before you have to run this command so the best way is to add this line onchange="exerciseFunction()" to your select list

CodePudding user response：

// Take the element first
const selectElement = document.getElementById('exerciseInput')
let exerciseValue = {
  price: 0
}

selectElement.addEventListener("change", function(e) {
  // Take the value from event. This value will be the option value which you choose.
  const inputValue = e.target.value;
  
  if (inputValue == 'noExercise') {
    exerciseValue.price = 150;
  }
  
  if (inputValue == 'lightExercise') {
    exerciseValue.price = 200;
  }
  
  console.log(exerciseValue)
  // And in the same way try others
})

<select id="exerciseInput">
  <option>Exercise</option>
  <option value="noExercise" id="noExercise">Inactive</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>