Tengo este fragmento de código, estoy tratando de registrar el valor seleccionado del menú desplegable, pero por alguna razón solo se registra "1". ¿Cómo arreglar esto?
var select = document.getElementById("numOfPieces"); var options = ["1", "2", "3", "4", "5"]; for(var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } var value = select.options[select.selectedIndex].value; console.log(value); select.onchange = function() { console.log(value); }1) Está tomando el valor antes de que onChange incluso llame, pero debe usar el valor después del evento onChange.
select.onchange = function(e) { // change let value = select.options[select.selectedIndex].value; console.log(value); } cuando toma el valor de select.selectedIndex antes del evento, entonces su valor es 0 , por eso siempre le da el valor del elemento en el índice 0 .
En cambio, lo que debe hacer es obtener el valor select.selectedIndex después de que se active el evento de change .
var select = document.getElementById("numOfPieces"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } select.onchange = function(e) { // change let value = select.options[select.selectedIndex].value; console.log(value); } <select name="numOfPieces" id="numOfPieces"></select> 2) También puede lograr el mismo resultado usando addEventListener
var select = document.getElementById("numOfPieces"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } select.addEventListener("change", e => { const value = e.target.value; console.log(value); }) <select name="numOfPieces" id="numOfPieces"></select>Está imprimiendo el var value , no el valor de su función onChange. Si desea obtener el valor de su selección, debe cambiar su función para recibir el evento onChange.
const select = document.getElementById("selectField"); select.addEventListener( 'change', function() { console.log(this.value); }, false ); <select name="selectField" id="selectField"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>o
const select = document.getElementById("selectField"); select.onchange = function() { console.log(this.value); }; <select name="selectField" id="selectField"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> De esta manera, el valor que está imprimiendo se refiere a this palabra clave, que dentro del contexto se refiere al elemento seleccionado.