JavaScript switch statement returns the first case only

Question

I'm making a calculator with vanilla JS and after running the switch statement to do a different thing on every case the program only returns the first case.

let res = document.getElementById("res")
let sub = document.getElementById("submit")
let sel = document.getElementById("sel")
let opt = sel.options[sel.selectedIndex];

sub.addEventListener("click", () => {
  let inp1 = Number(document.getElementById("input1").value)
  let inp2 = Number(document.getElementById("input2").value)
  switch (opt.value) {
    case "+":
      res.innerHTML = inp1 + inp2;
      break;
    case "-":
      res.innerHTML = inp1 - inp2;
      break;
    case "*":
      res.innerHTML = inp1 * inp2;
      break;
    case "/":
      res.innerHTML = inp1 / inp2;
      break;
    default:
      res.innerHTML = "Please enter something in all of the empty fields";
  }
})

<div>
  <input id="input1" class="input w3-round">
  <select class="dropdown w3-animate-zoom w3-round" id="sel">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input id="input2" class="input w3-round">
  <button id="submit" class="w3-button-small w3-round w3-green">Submit</button>
</div>
<p id="res" class="p"></p>

You need to move the line `let opt = sel.options[sel.selectedIndex];` in the click listener, otherwise it doesn't update after the initl load — Luca Kiebel, Jul 17 '19 at 19:37
Possible duplicate of [Global variable not changing on event](https://stackoverflow.com/questions/19120122/global-variable-not-changing-on-event) — Heretic Monkey, Jul 17 '19 at 20:03

score 1 · Answer 1 · answered Jul 17 '19 at 19:52

If you need to use opt elsewhere you could add another listener and keep what you have:

sel.addEventListener('change', () => {
    opt = sel.options[sel.selectedIndex];
});

This will allow for opt to be referenced outside of your sub.click listener.

score 0 · Accepted Answer · answered Jul 17 '19 at 19:40

You never update selected option, so it always refers to the initial value. You have to update the value every time you click the button.

Move the line inside your callback function.

let res = document.getElementById("res")
let sub = document.getElementById("submit")
let sel = document.getElementById("sel")
// ---

sub.addEventListener("click", ()=>{
    // +++
    let opt = sel.options[sel.selectedIndex];
    // ...
})

score 0 · Answer 3 · answered Jul 17 '19 at 19:52

You don't need opt at all here. Instead of getting the selected option's value on load, use the select's value. sel.value will have the selected option's value every time you change it.

Simply, change

switch (opt.value)

to

switch (sel.value)

Here's the updated snippet:

let res = document.getElementById("res")
let sub = document.getElementById("submit")
let sel = document.getElementById("sel")

sub.addEventListener("click", () => {
  let inp1 = Number(document.getElementById("input1").value)
  let inp2 = Number(document.getElementById("input2").value)
  switch (sel.value) { // <-- HERE
    case "+":
      res.innerHTML = inp1 + inp2;
      break;
    case "-":
      res.innerHTML = inp1 - inp2;
      break;
    case "*":
      res.innerHTML = inp1 * inp2;
      break;
    case "/":
      res.innerHTML = inp1 / inp2;
      break;
    default:
      res.innerHTML = "Please enter something in all of the empty fields";
  }
})

<div>
  <input id="input1" class="input w3-round">
  <select class="dropdown w3-animate-zoom w3-round" id="sel">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input id="input2" class="input w3-round">
  <button id="submit" class="w3-button-small w3-round w3-green">Submit</button>
</div>
<p id="res" class="p"></p>

score 0 · Answer 4 · answered Jul 17 '19 at 19:55

You are using the selected index and if you console.log the sel value you will see that you have full line of code and selectedIndex will return first index. Just simply don't use the selectedIndex and use

let res = document.getElementById("res");
let sub = document.getElementById("submit");
let sel = document.getElementById("sel");

sub.addEventListener("click", () => {
let inp1 = Number(document.getElementById("input1").value)
let inp2 = Number(document.getElementById("input2").value)
console.log(sel.value);
switch(sel.value){
    case "+": 
    res.innerHTML=inp1+inp2; 
    break;
    case "-": 
    res.innerHTML=inp1-inp2; 
    break;
    case "*": 
    res.innerHTML=inp1*inp2; 
    break;
    case "/": 
    res.innerHTML=inp1/inp2; 
    break;
    default:
    res.innerHTML="Please enter something in all of the empty fields";  
}

})

This code will solve your problem :)

JavaScript switch statement returns the first case only

4 Answers4