Estoy tratando de hacer una búsqueda del tesoro con mis alumnos. Básicamente, hacen algo, ingresan una respuesta, si es correcta, la página debería darles la URL para pasar a la siguiente pista. Si es incorrecto, reciben un mensaje de "Lo siento, es incorrecto" y pueden seguir ingresando hasta que lo entiendan. He leído varios sitios y probado cosas diferentes. Tuve la entrada resuelta, pero no pude averiguar cómo mostrar un enlace directo para que hicieran clic en JS. Tengo una configuración de sitio gratuita y quiero insertar este Javascript pero, por supuesto, ¡no funciona!
function myFunction() { var letter = document.getElementById("personsInput").value; var text; let linkName = "Next challenge."; // If the word is correct “chocolate" if (letter === "chocolate") { text = "<a ref ='https:// this is where the URL goes'> +linkName + " < /a>"; // If the word is anything else } else { text = "Sorry, wrong answer"; } document.getElementById("demo").innerHTML = text; } <input id="personsInput" type="text"> <button onclick="myFunction()">What is your answer?</button> <p id="demo"></p>"<a ...> + linknamehref , no ref . Solucioné estos dos problemas y funciona según lo previsto. <input id="personsInput" type="text"> <button onclick="myFunction()">What is your answer?</button> <p id="demo"></p> <script> function myFunction() { var letter = document.getElementById("personsInput").value; var text; let linkName = "Next challenge."; // If the word is correct “chocolate" if (letter === "chocolate") { text = "<a href ='https:// this is where the URL goes'>" +linkName + "</a>"; // If the word is anything else } else { text = "Sorry, wrong answer"; } document.getElementById("demo").innerHTML = text; } </script>Aquí hay otra forma de hacerlo usando document.createElement
<script> function myFunction() { const answer = document.getElementById("personsInput").value; const resultArea = document.getElementById("demo") const linkName = "Next challenge."; const wrongAnswer = "Sorry, wrong answer."; resultArea.innerHTML = ''; if (answer === "chocolate") { const link = document.createElement('a'); link.href = 'http://google.com'; link.text = linkName; link.target = '_blank'; resultArea.appendChild(link); } else { text = "Sorry, wrong answer"; resultArea.innerHTML = wrongAnswer; } } </script> <input id="personsInput" type="text"> <button onclick="myFunction()">What is your answer?</button> <p id="demo"> </p>Como se señaló en las otras respuestas, tal vez esta no sea la mejor manera de examinar a sus alumnos, ya que pueden ver la fuente y obtener las respuestas correctas desde allí.
¡Lo entendiste! Solo te falta un cierre " después de donde va la URL.
Una advertencia para que sus estudiantes puedan inspeccionar la fuente del sitio y ver las respuestas correctas.
text = "<a ref ='https:// this is where the URL goes'>" + linkName + " </a>"; function myFunction() { var letter = document.getElementById("personsInput").value; var text; let linkName = "Next challenge."; // If the word is correct “chocolate" if (letter === "chocolate") { text = "<a ref ='https:// this is where the URL goes'>" + linkName + " </a>"; // If the word is anything else } else { text = "Sorry, wrong answer"; } document.getElementById("demo").innerHTML = text; } <input id="personsInput" type="text"> <button onclick="myFunction()">What is your answer?</button> <p id="demo"></p>