javascriptbuttononclickbuttonclickintro.js

Button onclick shows hidden message javascript

The button needs to be edited in css to appear the way I have, that part worked. Then it needs to show a message that says "welcome to the world of coding!" upon clicking the button. I feel like it's something very little but I've reread through this like 20x

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Greeting Page</title>
        <style>
        h1 {
            font-size: 14pt;
            text-align: center;
            }
        body {
            background-color: #eec0c8;
            font-family: Georgia;
            }
    button {
      background-color: rgb(245, 66, 132);
      padding: 33px;
      }
    button:hover {
        background-color: #ffffff;
              }
        </style>
    </head>
    <body>
        <h1> Welcome to my page! </h1>
        <p>This is a simple webpage created as a learning exercise.</p>
        <p> 
        <button onclick="hideUnhide(paragraph1)">Click to see a message!</button>
        </p>
        <p id="paragraph1">Welcome to the world of coding!</p>
      <script>
        function hideUnhide(id){
            const p1 = document.getElementById(id);
            if (p1.style.display == "none"){
                p1.style.display = "block";
            }
            else {
                p1.style.display = "none";
            }
        }
      </script>
    </body>
</html>

I am new to programming and I'm in a class. I have tried doing it 5 different ways and every time it will not allow the click function to show the message. I tried it in notepad++ and also in vs code. What am I doing wrong here? This is my last attempt I should've saved every version so I could ask about each one, but this one I followed the button directions verbatim from a YouTube video of someone doing the same thing in vs code and it did not work but they have it on video working.

Solution

  • Because this code

    onclick="hideUnhide(paragraph1)"

    means

    call hideUnhide function with variable paragraph1 as parameter

    not

    call hideUnhide function with string paragraph1 as parameter

    You need to quote a string in order for the interpreter to use it as a string:

    onclick="hideUnhide('paragraph1')"


    function hideUnhide(id) {
  const p1 = document.getElementById(id);
  if (p1.style.display == "none") {
    p1.style.display = "block";
  } else {
    p1.style.display = "none";
  }
}
    h1 {
  font-size: 14pt;
  text-align: center;
}

body {
  background-color: #eec0c8;
  font-family: Georgia;
}

button {
  background-color: rgb(245, 66, 132);
  padding: 33px;
}

button:hover {
  background-color: #ffffff;
}
    <h1> Welcome to my page! </h1>
<p>This is a simple webpage created as a learning exercise.</p>
<p>
  <button onclick="hideUnhide('paragraph1')">Click to see a message!</button>
</p>
<p id="paragraph1">Welcome to the world of coding!</p>