RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://stackoverflow.com/questions/78984210/button-onclick-shows-hidden-message-javascript below:

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.

asked Sep 14, 2024 at 3:15

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>

answered Sep 14, 2024 at 4:09

PasserbyPasserby

10.1k22 gold badges3737 silver badges5353 bronze badges

0

Your getElementById isn't supposed to have a variable but the id name.

<!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()">Click to see a message!</button>
    </p>
    <p id="paragraph1">Welcome to the world of coding!</p>
    <script>
        function hideUnhide() {
            const p1 = document.getElementById("paragraph1");
            if (p1.style.display === "none") {
                p1.style.display = "block";
            }
            else {
                p1.style.display = "none";
            }
        }
    </script>
</body>

</html>

See the getElementById is "paragraph1" which will work in your case. EDIT: While this works, The answer by @passerby is more apt.

answered Sep 14, 2024 at 3:50

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4