mi html
<form id="form"> <div id="tshirtOrder"> <button id="tshirt">T-Shirt</button> <label>Quantity:</label> <select name="tshirtQuantity" required> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div>mi js
const getForm = () => { const formEl = document.getElementById('form') let tshirtQuantity = formEl.elements.tshirtQuantity.value } Estoy tratando de vender un artículo de camiseta con la opción de cantidad (valor numérico) como una lista desplegable. Mi pregunta es ¿cómo puedo escribir una sintaxis para devolver la cantidad dada en número del valor 1, 2, 3? El JavaScript que escribí siempre devuelve el valor de la primera opción (1) dentro de <select name="tShirtQuantity"> . Quiero consultar el valor numérico correcto que el usuario seleccionó en el menú desplegable. ¡Gracias!
Puede usar querySelectorAll , spread operator y función de map como
let selectElement = document.querySelectorAll('[name=tshirtQuantity]'); let optionValues = [...selectElement[0].options].map(o => parseInt(o.value))Si solo desea obtener el valor seleccionado
console.log(selectElement[0].options[selectElement[0].selectedIndex].value) const getForm = () => { let selectElement = document.querySelectorAll('[name=tshirtQuantity]'); let optionValues = [...selectElement[0].options].map(o => parseInt(o.value)); console.log(optionValues); console.log(selectElement[0].options[selectElement[0].selectedIndex].value) } getForm(); <form id="form"> <div id="tshirtOrder"> <button id="tshirt">T-Shirt</button> <label>Quantity:</label> <select name="tshirtQuantity" required> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </form>El siguiente método es una solución de la vieja escuela.
Reemplazar:
let tshirtQuantity = formEl.elements.tshirtQuantity.valuecon:
let tshirtQuantity = formEl.elements.tshirtQuantity.options[formEl.elements.tshirtQuantity.selectedIndex]Hay algunos problemas con su código.
Primero, el HTML. Está cerrando la etiqueta en el lugar equivocado, y el elemento HTML que debe escuchar no es el form , sino la select .
<form id="form"> <div id="tshirtOrder"> <label>Quantity: <select class="tshirt" name="tshirtQuantity" required> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </label> </div> </form>Luego, para obtener el cambio en el elemento, debe agregar un detector de eventos que reaccione al cambio.
const selectElement = document.querySelector('.tshirt'); selectElement.addEventListener('change', (event) => { console.log(event.target.value) });Puede leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event