Question

54

Display a div using a javascript function

rated 0 times [ 55] [ 1] / answers: 1 / hits: 25384 / 13 Years ago, thu, april 14, 2011, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorafrancisl

Add To Favorites

Follow

Total Points: 80

Total Questions: 96

Total Answers: 102

Location: Ukraine

Member since Sun, Dec 13, 2020

4 Years ago

answered 13 Years ago shaynelandenb · Accepted Answer

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;

}