Estoy construyendo mi propio sitio web de compras y me quedé atascado en esta parte:
<label for="option">Option</label> <select id="option"> <optgroup> <option onclick="changeValueA()">Option A</option> <option onclick="changeValueB()">Option B</option> </optgroup> </select> <p>You choosed Option <span id="option-value"></span></p> <script> function changeValueA(){ document.getElementById("option-value").innerHTML = "Option A"; } function changeValueB(){ document.getElementById("option-value").innerHTML = "Option B"; } </script>Quiero hacer que el "valor de la opción" muestre la "Opción A" si se llama a changeValueA() haciendo clic en la opción A desde <select>, y quiero hacer que el "valor de la opción" muestre la "Opción B" si se llama a changeValueB() llamado haciendo clic en la opción B de <seleccionar>.
Sin embargo, el código no funciona. Estaría muy agradecido si me ayudas en esta parte!
los elementos de option no responden a los eventos de clic (como puede ver en los console.log agregados a continuación); en su lugar, debe verificar el valor de <select> :
// these functions never run: function changeValueA() { console.log("A") document.getElementById("option-value").innerHTML = "Option A"; } function changeValueB() { console.log("B") document.getElementById("option-value").innerHTML = "Option B"; } // This one will be triggered by the select's onchange handler, // and passes the selected value in so you don't need multiple // similar functions: function changeValue(val) { document.getElementById("option-value").innerHTML = val; } <label for="option">Option</label> <select id="option" onchange="changeValue(this.value)"> <optgroup> <option onclick="changeValueA()">Option A</option> <option onclick="changeValueB()">Option B</option> </optgroup> </select> <p>You chose <span id="option-value"></span></p>