How can I make a div appear onclick using Javascript?

Question

I want to make 2 buttons appear onclick. How can I do this with Javascript? The code is supposed to ask a user "How their doing?" and then give them 2 options to choose from.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function helloName() {
            // GET THE USERS INPUT
            var userName = document.getElementById("name").value;

            // GREET USER WITH THEIR NAME
            document.write("Hello " + userName + ", How are you doing today?");

            // GIVE USER AN OPTION TO SELECT HOW THEIR FEELING 
            document.getElementById("show-buttons").style.display = 'block';
        };

    </script>
</head>

<body>
    <h1>JS Skills Test</h1>
    <label for="name">Enter Your Name</label>
    <input id="name" type="text" placeholder="Enter Your Name">
    <button onclick="helloName()">Click Me</button>

    <div id="show-buttons" style="display: none;">
        <button id="bad">I'm not doing to well</button>
        <button id="good">I'm doing wonderful</button>
    </div>

</body>

</html>

You cant do document.write after the dom has finished loading. — Paul Rooney
– Paul Rooney, Commented Nov 27, 2020 at 2:41
You can hide the 2 buttons with css. And once you get the user input just get the the correct button by Id or Class name and change the correct buttons css hidden property to unhidden. Maybe that will work for you’re usecase — Maurice Pheyton
– Maurice Pheyton, Commented Nov 27, 2020 at 2:45

Mark · Accepted Answer · 2020-11-27 02:45:00Z

7

When you do document.write(), all the dom element will be deleted, try this:

function helloName() {
  // GET THE USERS INPUT
  var userName = document.getElementById("name").value;

  // GREET USER WITH THEIR NAME
  document.getElementById("message").innerText = "Hello " + userName + ", How are you doing today?";

  // GIVE USER AN OPTION TO SELECT HOW THEIR FEELING 
  document.getElementById("show-buttons").style.display = 'block';
};

<h1>JS Skills Test</h1>
<label for="name">Enter Your Name</label>
<input id="name" type="text" placeholder="Enter Your Name">
<button onclick="helloName()">Click Me</button>
<div id="message"></div>

<div id="show-buttons" style="display: none;">
  <button id="bad">I'm not doing to well</button>
  <button id="good">I'm doing wonderful</button>
</div>

edited Nov 27, 2020 at 2:45

Mark

92.6k8 gold badges116 silver badges156 bronze badges

answered Nov 27, 2020 at 2:43

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bojoer Over a year ago

Good answer, I didn't even notice this and just wrote a toggle functionality on click of the button. Since that was the question but upvoted your answer cause it both makes the message visible and will make the buttons wrapper div visible. Very thoroughly read and answered the question with a completely working example! So /ignore my answer below although it does answer the original question which was making a div appear on click of a button, my function toggles display: none/block because the original code was written with the display property. I would use visibility: visible/hidden;

Bojoer · Accepted Answer · 2020-11-27 02:55:17Z

0

You add an event listener on click on the div and add or change css class which contains visibility or display properties.

function helloName() {
  const x =        
    document.getElementById("show-buttons");
  if (x.style.display === "none") {
      x.style.display = "block";
  } else {
      x.style.display = "none";
  }
}

You could also use style visibility: visible; or visibility: hidden;

This can be found simple on w3schools.com btw.

answered Nov 27, 2020 at 2:55

Bojoer

9489 silver badges19 bronze badges

Comments

0xjustuzair · Accepted Answer · 2020-11-27 05:23:57Z

0

You could do something like:

function helloName() {
  document.getElementById('message').innerText = "Hello"+ userName + ", How are you doing today?";
  var x = document.getElementById("show-buttons");
  x.style.display="block";
  }

answered Nov 27, 2020 at 5:23

0xjustuzair

5971 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

How can I make a div appear onclick using Javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related