如何使用 if 语句从 select 标记中提取值？ (Javascript)答案

【问题标题】：How do you use an if statement to extract a value from a select tag? (Javascript)如何使用 if 语句从 select 标记中提取值？ (Javascript)
【发布时间】：2020-04-08 09:07:14
【问题描述】：

我的第一个输入框

<input type="number" id="number1">
<br>
<br>

我的选择

<input type="number" id="number1">
<select id="operation">  
<option value="add">Add</option>
<option value="subtract">Subtract</option>
</select>
<br>
<br>

我的第二个输入框

<input type="number" id="number2">
<br>
<br>

这是下面的按钮

<button onclick="calculateNum()">Calculate</button>
<br>
<p id="result">This is your result....</p>
</select>
<script>
function calculateNum(){
var operation = document.getElementById("operation").value;

在下面的代码（if 语句）中，我是否有任何类型的语法错误？

if(operation == "add"){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var result = parseInt(number1) + parseInt(number2);
document.getElementById("result").innerHTML = result;
}
else if(operation == "subtract"){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var result = parseInt(number1) - parseInt(number2);
document.getElementById("result").innerHTML = result;
}
}
</script>

【问题讨论】：

标签： javascript forms if-statement math parseint

【解决方案1】：

尝试获取所选选项的索引并从以下选项中选择它：

let selectField = document.getElementById('operation');
let operation = selectField.options[selectField.selectedIndex].value;
if (operation == "add") {
    // do something
}

【讨论】：

【解决方案2】：

你有很多错误，比如：

您定义了 2 个 ID 为 number1 和 number2 的输入，但您引用的是 num1 和 num2
您声明了num1 和num2 变量，但在解析时使用了number1 和number2。
您覆盖了结果对象中的纯文本。

我已经编辑了您的代码。现在你可以试试：

function calculateNum() {
  var operation = document.getElementById("operation").value;
  
  var num1 = document.getElementById("number1").value;
  var num2 = document.getElementById("number2").value;
  
  var result;
  
  if(operation == "add"){
    result = parseInt(num1) + parseInt(num2);
  } else {
    result = parseInt(num1) - parseInt(num2);
  }
  
  document.getElementById("result").innerHTML = result;
  // or
  // document.getElementById("result").textContent = result;
  // document.getElementById("result").innerText = result;
}

<input type="number" id="number1">
<input type="number" id="number2">

<select id="operation">  
  <option value="add">Add</option>
  <option value="subtract">Subtract</option>
</select>

<button onclick="calculateNum()">Calculate</button>
<br>
<p>This is your result: <span id="result"></span></p>

【讨论】：

几乎和我写的答案一模一样。我要提到的唯一另一件事是从.innerHTML 更改为.textContent。