Estoy tratando de mostrar en el campo de entrada el valor de éxito correspondiente al estado.
Por ejemplo, si selecciono "1. Contacto inicial", tengo que mostrar en la entrada 0.
Esto es lo que he estado intentando hasta ahora, pero estoy completamente atascado en cómo mostrar solo el valor de éxito.
TENGO QUE HACER TODO EN JS, NO PUEDO TOCAR NADA EN EL HTML
const oppoStatus = [{ K_OPPO_STATUS: 1, STATUS: "1. Initial Contact", SUCCESS: 0, }, { K_OPPO_STATUS: 2, STATUS: "2. Demonstration", SUCCESS: 25, }, { K_OPPO_STATUS: 3, STATUS: "3. Proposal", SUCCESS: 50, }, { K_OPPO_STATUS: 4, STATUS: "4. Negotiation", SUCCESS: 75, }, { K_OPPO_STATUS: 5, STATUS: "5. Order", SUCCESS: 100, }, ]; let select = document.querySelector("select"); let input = document.querySelector("input").value; let output = document.getElementsByClassName("output") let button = document.querySelector("button"); function renderOppoStatusToSelectElement() { for (let i = 0; i < oppoStatus.length; i++) { let status = oppoStatus[i].STATUS; let success = oppoStatus[i].SUCCESS; let opt = document.createElement("option"); select.appendChild(opt); opt.value = success; opt.innerHTML = status; select.addEventListener("change", function() { let optValue = opt.value console.log(optValue); }) } button.addEventListener("click", function() { console.log("working"); }); } renderOppoStatusToSelectElement(); <select name="status"></select> <input name="success" type="number" min=0 max=100 step=1 value="0"> <button type="submit">Submit</button> </form> <div class="output">Waiting for form submit...</div>Está agregando múltiples detectores de eventos a la selección, cada uno imprime el valor de esa opción, incluso si no es la opción seleccionada.
Solo debe agregar un oyente fuera del ciclo, y debe imprimir el valor de selección, no el valor de una opción. El valor de la selección es el valor de la opción seleccionada.
const oppoStatus = [{ K_OPPO_STATUS: 1, STATUS: "1. Initial Contact", SUCCESS: 0, }, { K_OPPO_STATUS: 2, STATUS: "2. Demonstration", SUCCESS: 25, }, { K_OPPO_STATUS: 3, STATUS: "3. Proposal", SUCCESS: 50, }, { K_OPPO_STATUS: 4, STATUS: "4. Negotiation", SUCCESS: 75, }, { K_OPPO_STATUS: 5, STATUS: "5. Order", SUCCESS: 100, }, ]; let select = document.querySelector("select"); let input = document.querySelector("input").value; let output = document.getElementsByClassName("output")[0]; let button = document.querySelector("button"); function renderOppoStatusToSelectElement() { for (let i = 0; i < oppoStatus.length; i++) { let status = oppoStatus[i].STATUS; let success = oppoStatus[i].SUCCESS; let opt = document.createElement("option"); select.appendChild(opt); opt.value = success; opt.innerHTML = status; } select.addEventListener("change", function() { let optValue = select.value console.log(optValue); }); button.addEventListener("click", function(e) { e.preventDefault(); output.innerHTML = select.value; }); } renderOppoStatusToSelectElement(); <select name="status"></select> <input name="success" type="number" min=0 max=100 step=1 value="0"> <button type="submit">Submit</button> </form> <div class="output">Waiting for form submit...</div>