Question

我正在使用香草JS制作计算器，并且在运行switch语句对每种情况执行不同的操作后，程序仅返回第一种情况。

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>

Answer 1

您永远不会更新选定的选项，因此它始终引用初始值。每次单击按钮都必须更新该值。

将行移到回调函数中。

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

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

Answer 2

如果您需要在其他地方使用opt，则可以添加另一个侦听器并保留已有的内容：

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

这将允许在您的opt侦听器之外引用sub.click。

Answer 3

这里完全不需要opt。不用加载选定选项的值，而是使用选定值。每次更改时，sel.value都会具有所选选项的值。

只需更改

switch (opt.value)

到

switch (sel.value)

这是更新的代码段：

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>

Answer 4

您正在使用选定的索引，并且如果console.log sel值选择，您将看到您有完整的代码行，selectedIndex将返回第一个索引。只是根本不使用selectedIndex而使用

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";  
}

}）

此代码将解决您的问题：）

JavaScript switch语句仅返回第一种情况

4 个答案: