Soy nuevo en la codificación y el aprendizaje de HTML y JavaScript. Escribí un conjunto de botones de radio en HTML para que pudiera alternar una opción y hacer clic en el botón Enviar, y usaría JS para mostrar la opción que eligió a continuación. El código funciona bien, sin embargo:
var x; function displayText() { if (document.getElementById("lsd").checked === true) { x = document.getElementById("lsd").value; document.getElementById("output").innerHTML = x; } else if (document.getElementById("shrooms").checked === true) { x = document.getElementById("shrooms").value; document.getElementById("output").innerHTML = x; } else if (document.getElementById("dmt").checked === true) { x = document.getElementById("dmt").value; document.getElementById("output").innerHTML = x; } else if (document.getElementById("peyote").checked === true) { x = document.getElementById("peyote").value; document.getElementById("output").innerHTML = x; } else if (document.getElementById("toad").checked === true) { x = document.getElementById("toad").value; document.getElementById("output").innerHTML = x; } } <p>What's your preferred psychedelic substance?</p> <input type="radio" id="lsd" name="drugs" value="lsd"> <label for="lsd">LSD</label> <br> <input type="radio" id="shrooms" name="drugs" value="shrooms"> <label for="shrooms">Magic Mushrooms/psilocybin</label> <br> <input type="radio" id="dmt" name="drugs" value="dmt"> <label for="dmt">DMT</label> <br> <input type="radio" id="peyote" name="drugs" value="peyote"> <label for="peyote">Peyote</label> <br> <input type="radio" id="toad" name="drugs" value="toad"> <label for="toad">The Toad/5-MeO-DMT</label> <br> <button onclick="displayText()">Submit!</button> <p> User's favorite drug is: <span id="output"></span> </p>Un selector más poderoso puede seleccionar el elemento que desea sin verificar manualmente cada uno
function displayText() { const selected = document.querySelector("[name='drugs']:checked"); const value = selected ? selected.value :null; document.getElementById("output").innerText = value; } <p>What's your preferred psychedelic substance?</p> <input type="radio" id="lsd" name="drugs" value="lsd"> <label for="lsd">LSD</label> <br> <input type="radio" id="shrooms" name="drugs" value="shrooms"> <label for="shrooms">Magic Mushrooms/psilocybin</label> <br> <input type="radio" id="dmt" name="drugs" value="dmt"> <label for="dmt">DMT</label> <br> <input type="radio" id="peyote" name="drugs" value="peyote"> <label for="peyote">Peyote</label> <br> <input type="radio" id="toad" name="drugs" value="toad"> <label for="toad">The Toad/5-MeO-DMT</label> <br> <button onclick="displayText()">Submit!</button> <p> User's favorite drug is: <span id="output"></span> </p>Puede simplificarlo así: puede pegarlo directamente en el archivo HTML y probarlo. No recomendaría esto para prod, pero para fines de aprendizaje es bueno.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport"> <meta content="ie=edge" http-equiv="X-UA-Compatible"> <title>Document</title> </head> <body> <p>What's your preferred psychedelic substance?</p> <form id="form"> </form> <button onclick="displayText()">Submit!</button> <p> User's favorite drug is: <span id="output"></span> </p> </body> <script> const drugs = { "lsd": "LSD", "shrooms": "Magic Mushrooms/psilocybin", "dmt": "DMT", "peyote": "Peyote", "toad": "The Toad/5-MeO-DMT" }; const form = document.getElementById("form"); for (const key in drugs) { form.innerHTML += ` <label style="display: block" for="lsd"> <input type="radio" id="${key}" name="drugs" value="${key}"> ${drugs[key]} </label>`; } function displayText() { const drugs = document.getElementsByName("drugs"); for (let i = 0; i < drugs.length; i++) { if (drugs[i].checked) { document.getElementById("output").innerHTML = drugs[i].value; } } } </script> </html>