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

Question

My first input box

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

My options

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

My second input box

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

This is a button below

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

In the below code (if statements), do I have syntax errors of any kind?

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>

Answer 1

Try getting the index of selected option and selecting it from options like so:

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

Answer 2

You have many mistakes, such as:

• You're defining 2 inputs with ids number1 and number2 but you refer to num1 and num2

• You declare num1 and num2 variables but you use number1 and number2 while parsing.

• You override the plain text in the result object.

I've edited your code. Now you can try it as:

 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>