How to obtain value of an html select in js through the DOM?

Navigation
0

Well the problem I have is that I want to do something very simple and I want to perform a mathematical operation depending on the type of operation that is selected (this is done by the type) but I do not know how to access through the DOM so that to be able to do this operation this is the code that I have for now 

    <!DOCTYPE html>
<html>
<head>
    <title>

    </title>
</head>
<body>

    <form>
        <input id="numero1" type="text" name="">
        <input id="numero2" type="text" name="">
        <select id="operaciones">
            <option id="suma" value="sumaa">Suma</option>
            <option id="multiplicacion" value="multiplicaionn">multiplicacion</option>
            <option id="divicion" value="divicionn">Divicion</option>
        </select>
        <input type="button" name="" value="calcular" onclick="operacion()">

    </form>

<script type="text/javascript" >
    function operacion(){
    var numero1=document.getElementById("numero1");
    var numero1=parseFloat("numero1");
    var numero2=document.getElementById("numero2");
    var numero1=parseFloat("numero1");

    var operation = document.getElementById("operaciones").value;
    if (operation=="suma" ){
         /*Codigo de la operacion de la suma aqui*/
    }
}



</script>
</body>
</html>

If you need more information, let me know. Thank you very much

    
asked by pintowJD 21.11.2018 в 23:56
source

3 answers

1

The value of the selector you get it right as you have: 

var operation = document.getElementById("operaciones").value;

But in your example, its value would be "sumaa" since it is so in value of <option>

You have to be more careful in the writing of both the questions and the code;) Check it out because you have other errors that prevent it from working properly.

I leave the corrected code to serve as a reference: 

    <!DOCTYPE html>
<html>
<head>
    <title>

    </title>
</head>
<body>

    <form>
        <input id="numero1" type="text" name="">
        <input id="numero2" type="text" name="">
        <select id="operaciones">
            <option id="suma" value="suma">Suma</option>
            <option id="multiplicacion" value="multiplicaion">multiplicacion</option>
            <option id="divicion" value="divicion">Divicion</option>
        </select>
        <input type="button" name="" value="calcular" onclick="operacion()">

    </form>

<script type="text/javascript" >
    function operacion(){

    var numero1=document.getElementById("numero1").value;
    numero1=parseFloat(numero1);
    var numero2=document.getElementById("numero2").value;
    numero2=parseFloat(numero2);

    var operation = document.getElementById("operaciones").value;
    if (operation=="suma" ){
         /*Codigo de la operacion de la suma aqui*/
      alert(operation+': '+(numero1+numero2) );
    }
    if (operation=="multiplicacion" ){
         /*Codigo de la operacion de la multiplicacion aqui*/
      alert(operation+': '+(numero1*numero2) );
    }    
    if (operation=="divicion" ){
         /*Codigo de la operacion de la divicion aqui*/
      alert(operation+': '+(numero1/numero2) );
    }       
      return false;
}



</script>
</body>
</html>

You can check it here: link

    
answered by 22.11.2018 в 00:29
0

Hello you should only choose the selected index 

var select = document.getElementById("operaciones");
var selectedOperation = select.options[select.selectedIndex].value;

Reference: link

    
answered by 22.11.2018 в 00:06
0

If you use jquery it's simpler, simply. 

var operacion = $('#operaciones').val();
    
answered by 22.11.2018 в 16:39
File reading Show date from the client's driver in the View