Display a div using a javascript function

Question

I'd like to display a div on a webpage when a user clicks on a button.

Does someone know how to do this ?

My code, so far, is :

        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
        </head>
        <body>
          <input id="text" type="text" size="60" value="Type your text here" />
          <input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />

          <script type="text/javascript">

        function check() {
              //Display my div balise named level0;
        }

          </script>

        </body>
      </html>

Thanks,

Bruno

EDIT: All my code (I've erased it because it was too long and not very clear)

Tikhon Jelvis · Accepted Answer · 2011-04-14 08:34:00Z

5

You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:

function check() {
    var div = document.createElement("div");
    div.innerHTML = document.getElementById("text").value;
    document.body.appendChild(div);
}

This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:

var div;
function check() {
    if (!div) {
        div = document.createElement("div");
        document.body.appendChild(div);
    }

    div.innerHTML = document.getElementById("text").value;
}

If you have the div already in the page with an id of "level0", try:

function check() {
    var div = document.getElementById("level0");
    div.innerHTML = document.getElementById("text").value;
}

edited Apr 14, 2011 at 8:34

answered Apr 14, 2011 at 8:16

Tikhon Jelvis

68.3k19 gold badges183 silver badges217 bronze badges

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

8 Comments

Bruno Over a year ago

Thanks for your answer. I've tried and it doesn't work : my div already exists (named level0) and when I put document.body.appendchild("level0") nothing happens.

Bruno Over a year ago

@Tikhon No but without the click I can display it.

Tikhon Jelvis Over a year ago

So the div isn't in the page, you just have its id? Or is it in the page and invisible?

Bruno Over a year ago

Because I did not write all of it for concision matters but without the click it works ok ( <body><div id="level0"></div></body>).

Tikhon Jelvis Over a year ago

Well, I added a bit to the end of the answer, which might work if I understood you correctly.

|

Simon Stender Boisen · Accepted Answer · 2011-04-14 08:18:05Z

A quick search on google gave me this example:

Demo of hide/show div

The source-code for that example is:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<html> 
<head> 
<title>Demo of Show hide div layer onclick of buttons</title> 
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks"> 
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set"> 
<style type="text/css"> 
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style> 


<script language="JavaScript"> 
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}

</script> 
</head> 
<body> 

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";> 

<div id="sub3">Message Box</div> 
<br><br> 
</body> 
</html>

Jim Blackler · Accepted Answer · 2011-04-14 08:19:27Z

2

Paste this code somewhere in your body

      <div id="myDiv" style="display:none">
          Hello, I am a div
      </div>

Add this snippet into your check() function to display the otherwise-hidden content.

      document.getElementById("myDiv").style.display = "block";

You could also change the div content programmatically thus:

      document.getElementById("myDiv").innerHTML = "Breakfast time";

... would change the text to 'Breakfast time'.

answered Apr 14, 2011 at 8:19

Jim Blackler

23.3k12 gold badges90 silver badges101 bronze badges

2 Comments

Bruno Over a year ago

Thanks for your answer. I've tried and it doesn't work : my div already exists (named level0) and when I put document.getElementById("level0").style.display = "block" nothing happens.

Bruno Over a year ago

Because I did not write all of it for concision matters but without the click it works ok ( <body><div id="level0"></div></body>).

Abdo · Accepted Answer · 2011-04-14 08:44:07Z

2

You might want to look into jquery, it'll make your life 100 times easier. Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.

Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( ) The function inside .ready( fn ) is a callback function; it get called when the document is ready.

$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

        <script type="text/javascript">
            $(document).ready( function() {
                $("#lnkClick").click( function() {
                    $("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
                });
             });
         </script>
    </head>
    <body>
         <div id="level0" style="display:none;">
         </div>

         <a href="#" id="lnkClick">Click me</a>
    </body>
</html>

Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/ There are plenty of examples.

Best of luck with Jquery!

answered Apr 14, 2011 at 8:44

Abdo

14.2k11 gold badges81 silver badges103 bronze badges

1 Comment

Jason Over a year ago

+1 for jquery, but i think your code example is overly complicated

Jason · Accepted Answer · 2011-04-14 08:45:39Z

1

you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
 $(document).ready(function() {
   $("#show_div_button").click(function() {
      $("#div_to_show").show();
      return false;
   });
});
</script>
</head>
<body>
  <a href="#" id="show_div_button">Click Me to Show the Div</a>
  <div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>

answered Apr 14, 2011 at 8:45

Jason

15.9k3 gold badges51 silver badges73 bronze badges

1 Comment

Jason Over a year ago

you can copy and paste the above code into a file and launch it in your browser to test

Collectives™ on Stack Overflow

Display a div using a javascript function

5 Answers 5

8 Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related