js generated using a simple calculation function select tag

html select option is used as the container receiving operator input value, select a different operator, the calculation result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="number" id="num1">
    <input type="number" id="num2">
    <select name="" id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option> 
    </ SELECT > 
    < span > = </ span > 
    < INPUT type = "Number" ID = "num3" Disabled > 
    < Button ID = "BTN" > the Click </ Button > 
<-! Num1, num2 for receiving the digital value of the user, placing SELECT operator, num3 prohibit user input, for placing the return value, button click event bindings ->

Method a: if else Analyzing 

<Script>
     var num1 = document.getElementById ( "num1" );
     var num2 = document.getElementById ( "num2" );
     var num3 = document.getElementById ( "num3" );
     var SEL = Document. the getElementById ( "SEL" ); 
　　// Get the elements needed 
    
    btn.onclick = function () {
         var val1 is = the parseInt (num1.value);
         var val2 = the parseInt (num2.value); 
　　　　// get the value num1 num2 and Switch number from string type
         IF (sel.value == "+" ) { 
            num3.value = val1 + val2;
        }the else  IF (sel.value == "-" ) { 
            num3.value = val1 is - val2; 
        } the else  IF (sel.value == "*" ) {
             // the console.log ( "A"); 
            num3.value = * val1 is val2; 
        } the else  IF (sel.value == "/" ) { 
            num3.value = val1 is / val2; 
        } the else { 
            the console.log ( "O" ); 
　　　　　　　// I play for the else test output may not be write 
        } 
　　　　// the value when sleect of each operator, respectively, for different operations, and the value to a third input frame 
    }  

     </ Script>

</body>
</html>

Method Two:

switch statement

 <script>
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var num3 = document.getElementById("num3");
    var sel = document.getElementById("sel");
    
    btn.onclick = function(){
        var val1 = parseInt(num1.value);
        var val2 = parseInt(num2.value);
        switch(sel.value){
            case "+":
            num3.value = val1 + val2;
            break;

            case "-":
            num3.value = val1 - val2;            
            break;

            case "*":
            num3.value = val1 * val2;
            break;

            case "/":
            num3.value = val1 / val2;            
            break;
        }  
    }

js generated using a simple calculation function select tag

Guess you like