Take Wert, Update-Feld mit der Ausgabe

Question

Mein Ziel: Ist ausgewählten Wert genommen führen Sie es durch meine Funktion Update-Feld mit Ausgabewert der Funktion.

Problem: Wenn ich den Wert aus der Liste auswählen, wird die Funktion nicht ausgelöst und das Feld nicht aktualisiert.

Vielen Dank für jede Hilfe.

HTML

<form id="someform"> 
<select id="sample" onChange="dIIN()"> 
<option>12</option> 
<option>14</option> 
<option>16</option> 
<option>18</option> 
<option>20</option> 
<option>22</option> 
<option>24</option> 
<option>27</option> 
<option>30</option> 
<option>32</option> 
</select> 
</form> 

<tr> 
<td>Quantity to be dredged</td> 
<td><input type="number" value="450000" class="" id="quantity-dredged" ></input></td> 
</tr> 

JavaScript

var dIIN = function() { 
    var dredgeSize = document.getElementById('sample'); 
    var foo = 0; 
    if (dredgeSize <= 12) { 
    foo = 36; 
    } else if (dredgeSize <= 14) { 
    foo = 42; 
    } else if (dredgeSize <= 16) { 
    foo = 44; 
    } else if (dredgeSize <= 18) { 
    foo = 48; 
    } else if (dredgeSize <= 20) { 
    foo = 60; 
    } else if (dredgeSize <= 22) { 
    foo = 62; 
    } else if (dredgeSize <= 24) { 
    foo = 62; 
    } else if (dredgeSize <= 26) { 
    foo = 68; 
    } else if (dredgeSize <= 28) { 
    foo = 68; 
    } else if (dredgeSize <= 30) { 
    foo = 74; 
    } 
    document.getElementById('quantity-dredged').value = foo; 
}; 

Hier ist ein codePen example

Answer 1

Ändern Sie die Zeile:

var dredgeSize = document.getElementById('sample'); 

zu:

var dredgeSize = document.getElementById('sample').value; 

Demo

Answer 2

Sie können stattdessen Ereignis-Listener verwenden Sie den Code sauber zu halten.

var dIIN = function(dredgeSize) { 
 
    var foo = 0; 
 
    if (dredgeSize <= 12) { 
 
    foo = 36; 
 
    } else if (dredgeSize <= 14) { 
 
    foo = 42; 
 
    } else if (dredgeSize <= 16) { 
 
    foo = 44; 
 
    } else if (dredgeSize <= 18) { 
 
    foo = 48; 
 
    } else if (dredgeSize <= 20) { 
 
    foo = 60; 
 
    } else if (dredgeSize <= 22) { 
 
    foo = 62; 
 
    } else if (dredgeSize <= 24) { 
 
    foo = 62; 
 
    } else if (dredgeSize <= 26) { 
 
    foo = 68; 
 
    } else if (dredgeSize <= 28) { 
 
    foo = 68; 
 
    } else if (dredgeSize <= 30) { 
 
    foo = 74; 
 
    } 
 
    document.getElementById('quantity-dredged').value = foo; 
 
}; 
 
    var select = document.querySelector('#sample'); 
 
    select.addEventListener('change', function(){ 
 
     dIIN(this.value); 
 
    });

<form id="someform"> 
 
<select id="sample"> 
 
<option>12</option> 
 
<option>14</option> 
 
<option>16</option> 
 
<option>18</option> 
 
<option>20</option> 
 
<option>22</option> 
 
<option>24</option> 
 
<option>27</option> 
 
<option>30</option> 
 
<option>32</option> 
 
</select> 
 
</form> 
 

 
<tr> 
 
\t \t \t \t \t \t \t \t <td>Quantity to be dredged</td> 
 
\t \t \t \t \t \t \t \t <td><input type="number" value="450000" class="" id="quantity-dredged" ></input></td> 
 
</tr>

Answer 3

HTML:

<form id="someform"> 
<select id="sample" onchange="dIIN(this)"> 
<option>12</option> 
<option>14</option> 
<option>16</option> 
<option>18</option> 
<option>20</option> 
<option>22</option> 
<option>24</option> 
<option>27</option> 
<option>30</option> 
<option>32</option> 
</select> 
</form> 

<tr> 
           <td>Quantity to be dredged</td> 
           <td><input type="number" value="450000" class="" id="quantity-dredged" ></input></td> 
</tr> 

javascript:

var dIIN = function(_this) { 

    var dredgeSize = _this.options[_this.selectedIndex].text; 
    var foo = 0; 
    if (dredgeSize <= 12) { 
    foo = 36; 
    } else if (dredgeSize <= 14) { 
    foo = 42; 
    } else if (dredgeSize <= 16) { 
    foo = 44; 
    } else if (dredgeSize <= 18) { 
    foo = 48; 
    } else if (dredgeSize <= 20) { 
    foo = 60; 
    } else if (dredgeSize <= 22) { 
    foo = 62; 
    } else if (dredgeSize <= 24) { 
    foo = 62; 
    } else if (dredgeSize <= 26) { 
    foo = 68; 
    } else if (dredgeSize <= 28) { 
    foo = 68; 
    } else if (dredgeSize <= 30) { 
    foo = 74; 
    } 
    document.getElementById('quantity-dredged').value = foo; 
};