简体   繁体   中英

How can I add, subtract, or multiply two variables using JavaScript?

<!DOCTYPE html>
<head><title> test ! </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<html>
<body>

<div class="container">

first number : <input class="form-control" id="num1" />
<br>
second number : <input class="form-control" id="num2" />
<br>
<select id="mathtype">
   <option value="add"> addition </option>
   <option value="sub"> subtraction </option>
   <option value="mul"> multiplication </option>
</select>
<br><br>
<button class="btn btn-primary" onclick="submit()" > submit </button>
<br><br>
<input type="text" id="output" >

</div>



</body>
<script src="js/jquery-1.9.1.js"></script>
<script>

function submit(){

    var mathtype = document.getElementById['mathtype'];

    if (mathtype == add ) {
        return num1 + num2;
    } else if (mathtype == sub ) {
        return num1 - num2;
    } else if (mathtype == mul ) {
        return num1 * num2;
    }   

    return true;

}

</script>

</html>

My current error:

SyntaxError: function statement requires a name.

I'd like to make a program that will execute a math operation according to the selected value (add,sub,mul), and after clicking submit, the answer is shown in the input with an id "output".

 function submit() { var mathtype = document.getElementById('mathtype').value; //Get the value of the select element..Correct the typo([]) var num1 = Number(document.getElementById('num1').value); //Get the value of `num1` input and convert it to type `Number` var num2 = Number(document.getElementById('num2').value); //Get the value of `num2` input and convert it to type `Number` if (mathtype == 'add') { //Compare with `string` as value of select input will be of type string, you did not have variable `add` to be tested document.getElementById('output').value = num1 + num2; } else if (mathtype == 'sub') { //Compare with `string` as value of select input will be of type string, you did not have variable `sub` to be tested document.getElementById('output').value = num1 - num2; } else if (mathtype == 'mul') { //Compare with `string` as value of select input will be of type string, you did not have variable `mul` to be tested document.getElementById('output').value = num1 * num2; } } 
 <div class="container"> first number : <input class="form-control" id="num1" /> <br>second number : <input class="form-control" id="num2" /> <br> <select id="mathtype"> <option value="add">addition</option> <option value="sub">subtraction</option> <option value="mul">multiplication</option> </select> <br> <br> <button class="btn btn-primary" onclick="submit()">submit</button> <br> <br> <input type="text" id="output"> </div> 

Note : Go through the comments for detailed explaination

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM