Using a button to display an image to an empty div element. How do I get it to not display "blo-CodePudding

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>

CodePudding user response：

 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>

CodePudding user response：

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!";