CODEWITHSUNDEEP
javascripthtml
cobo16
cobo16

Reputation: 3

Click Div make another Div Appear

I am trying to make a prompt box of sorts in which you click one div and another transitions from visibility = hidden to visibility = visible. This is my code so far and I don't know why it doesn't work.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="C.K.">
        <title></title>
        <link rel="stylesheet" href="./css/main.css">
        <script type="text/js">
            document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble";
        </script>
    </head>
    <body>
        <div id="selector">
            SELECTOR
        </div>
        <div id="addpanel">
            <table id="add">
                <tr>
                    <td id="plus">+</td>
                </tr>
                <tr>
                    <td>Add New Item</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Upvotes: 0

Views: 61

Answers (3)

F&#225;bio Correia
F&#225;bio Correia

Reputation: 613

Check this out:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="C.K.">
        <title></title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <div id="selector">
        SELECTOR
    </div>
    <div id="addpanel">
        <table id="add">
            <tr>
                <td id="plus">+</td>
            </tr>
            <tr>
                <td>Add New Item</td>
            </tr>
        </table>
    </div>
   <script type="text/javascript">
    document.getElementById("selector").style.visibility = "hidden";
    document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";};
   </script>
</body>

Upvotes: 1

user7805580
user7805580

Reputation:

Try this

function show(){ document.getElmenetById('selector').style.visibility = 'visible'; }

Then just put onclick='show()' as an attribute in the tag you want to be the button. Plus, you should put JavaScript at the end of the page, just first of the </body> tag.

Upvotes: 0

Lee Kowalkowski
Lee Kowalkowski

Reputation: 11751

HTML is parsed top to bottom. Your script will be run immediately just in case it produces any more HTML for the parser to handle (e.g. with document.write). At the point of document.getElementById("addpanel").onclick, addpanel does not exist because the HTML parser hasn't reached it yet.

Move your <script> block to after your apppanel element's closing tag.

Also, onclick needs to be a function. So it would be:

document.getElementById("addpanel").onclick = function() {
  document.getElementById("selector").style.visibility = "visible"
}

Quick working example: https://jsfiddle.net/m2q6ubuv/

Upvotes: 0

Related Questions