Javascript - un lien pour apparaître si le mot correct est entré dans l'invite

Question

Je fais une petite démonstration javascript et je veux que cela fonctionne, donc quand vous tapez le bon mot dans la boîte de message, il montre un lien cliquable (ou un bouton) pour passer à une autre page (actuellement un lien d'espace réservé pour google) avec du texte. J'aimerais avoir des suggestions sur la façon de le faire efficacement et simplement. Merci.

<button onclick="myFunction()">Click me to talk to the guard</button> 
<p id="demo"></p> 
<script> 
function myFunction() { 
var txt; 
var colour = prompt("If you wanna get in to the castle tell me what the current king's favourite colour is"); 

if (colour == "red" || colour == "Red") { 
txt= "well done" + <button onclick="a href="www.google.com">Click to continuue</button> <!--incorrect code to be changed--> 
} 
else { 
txt="sorry you aren't allowed in"; 
} 
    document.getElementById("demo").innerHTML = txt; 
} 
    var txt; 
</script> 

Answer 1

Il vous manque les guillemets simples qui concaténera la <button> html dans le txt. Modifiez votre code pour inclure des guillemets simples,

'<button onclick="a href="www.google.com">Click to continuue</button>' 

code final

function myFunction() { 
 
var txt; 
 
var colour = prompt("If you wanna get in to the castle tell me what the current king's favourite colour is"); 
 
if (colour == "red" || colour == "Red") { 
 
txt= "well done" + '<button onclick="a href="www.google.com">Click to continuue</button>'; 
 
} 
 
else { 
 
txt="sorry you aren't allowed in"; 
 
} 
 
    document.getElementById("demo").innerHTML = txt; 
 
}

<button onclick="myFunction()">Click me to talk to the guard</button> 
 
<p id="demo"></p>

Answer 2

Vous êtes presque droite. Cela devrait fonctionner.

var button = document.querySelector('button') 
 
var result = document.querySelector('#result') 
 
button.addEventListener('click', onButtonClick) 
 

 
function onButtonClick(e) { 
 
    var toInsert; 
 
    var color = prompt("If you wanna get in to the castle tell me what the current king's favourite colour is"); 
 

 
    if (color.toLowerCase() === "red") { 
 
    toInsert = 'Well done!\n\n <a href="www.google.com">Click to continue</a>' 
 
    } else { 
 
    toInsert = "sorry you aren't allowed in"; 
 
    } 
 
    result.innerHTML = toInsert; 
 
}

<button>Click me to talk to the guard</button> 
 
<div id="result"></div>