I am assigned to display an image when a secret word is guessed. Everything works fine, but when I use the style "block" to show the image, the actual string "block" shows up with it. I am sure this is an easy fix, but have not found a similar issue. Thanks in advance.
JavaScript:
function getSecretMessage() {
let secretMessage = "Link";
let userMessage = "";
while (userMessage != secretMessage) {
userMessage = prompt("Enter the Secret word.")
}
let showimage = document.getElementById("picture").style.display="block";
document.getElementById("results").innerHTML = "Congratulations!" + showimage;
}
HTML:
<button type = "button" id = "button" onclick="getSecretMessage()">Click here to view the secret message...</button>
<div id = "results">
incomplete information
</div>
<div id = "picture" style= "display:none">
<img src="linkzelda.jpg">
</div>
function getSecretMessage() {
let secretMessage = "Link";
let userMessage = "";
while (userMessage != secretMessage) {
userMessage = prompt("Enter the Secret word.")
}
document.getElementById("picture").style.display="block";
document.getElementById("results").innerHTML = "Congratulations!";
} <button type = "button" id = "button" onclick="getSecretMessage()">Click here to view the secret message...</button>
<div id = "results">
incomplete information
</div>
<div id = "picture" style= "display:none">
<img width="300" height="300" src="https://images.unsplash.com/photo-1633683536118-ed815cd3dd17?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=764&q=80">
</div>You seem to have problem here.
let showimage = (document.getElementById("picture").style.display =
"block")
document.getElementById("results").innerHTML =
"Congratulations!" + showimage;
In JavaScript and many other languages, the final value of the assignment is the value of right operand.
let a = b = 3; // a: 3, b: 3
let showimage = (document.getElementById("picture").style.display = "block") // showimage: "block"
Do you just need "Congratulations" message? Then you can fix as following.
document.getElementById("results").innerHTML = "Congratulations!";