Could someone explain why my javascript is not working?

Question

Could someone please explain where i am going wrong on getting my hidden DIV to display using Javascript. I have looked at previous answers to this and they do not seem to be working.

        .newinner
    {
        display: none;
        padding-left: 10px;
        padding-top: 10px;
        background: white;
        width: 905px;
        margin: auto;
        height: 400px;
    }
    </style>
    <script>
    function ShowDiv(newinner)
    {
        document.getElementsByClassName("newinner").style.display="block";
    }
    </script>

Below is the DIV

    <button type="button" name="faddress" value="Show Div" onClick="showDiv('newinner')" />Find Address</button></div>
    <div class="newform">
    <div class="newinner">
    <form>
    <div class="formtitle"><b>To request this brochure please fill out the form below.</b></div>
    <div class="ntitle"><b>First Name*:</b><br><select>
      <option value="title">Title</option>
      <option value="mr">Mr</option>
      <option value="mrs">Mrs</option>
      <option value="miss">Miss</option>
      <option value="ms">Ms</option>
    </select>
    </div>
    <div class="fname">
    <input type="firstname" name="fname" /></div>
    <div class="lname"><b>Last Name:*</b><input type="lastname" name="lname" /></div>
    </form>
    </div>
    </div>

I don't see you calling ShowDiv anywhere and there is no element with ID newinner. — Felix Kling
– Felix Kling, Commented Nov 21, 2012 at 11:10
One sets the style attribute of an element rather than a CSS selector (.newinner), you can do that stackoverflow.com/questions/5753680/… but as the link says, there are better ways. You also dont call the function in your example. — Alex K.
– Alex K., Commented Nov 21, 2012 at 11:11

Jorge Alvarado · Accepted Answer · 2012-11-21 11:11:43Z

1

you are not calling the function anywhere in your page

answered Nov 21, 2012 at 11:11

Jorge Alvarado

2,66424 silver badges34 bronze badges

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

Comments

Bruno · Accepted Answer · 2018-04-14 05:13:09Z

1

newinner is defined as a class, and you are searching for a node which has id equal to newinner... moreover you are not calling ShowDiv() anywhere in the code you posted

-- Updates --

I see you've updated the question since my initial answer, but there are still several problems in the code.

document.getElementsByClassName returns all the elements with the given class; it's an array-like structure. So normally you've to loop over each element; but in this case you could use an id instead, and then the document.getElementById method, that returns only the selected element when found, or null otherwise.

So you can rewrite showDiv as:

function ShowDiv (id) {
    document.getElementById(id).style.display = "block";
}

<button type="button" name="faddress" onClick="showDiv('newinner')">
    Find Address
</button>

<div id="newinner">
    ...
</div>

Also keep in mind that the use of onClick attribute is good for fast prototyping or demo purpose; if you're going to use this code in production, I recommend you to use document.addEventListener instead.

edited Apr 14, 2018 at 5:13

answered Nov 21, 2012 at 11:11

Bruno

6,0006 gold badges36 silver badges54 bronze badges

3 Comments

user1839483 Over a year ago

sorry missed that bit <button type="button" name="faddress" value="Show Div" onClick="showDiv('newinner')" />Find Address</button></div>

Felix Kling Over a year ago

@user1839483: Then please edit your question and add the relevant information. Code in comments is most of the time horrible and information distributed over comments is not useful either.

user1839483 Over a year ago

@FelixKling sorry i am new to this :-)

hj.sun · Accepted Answer · 2012-11-21 11:22:53Z

0

If you want to use document.getElementById() method, then give your DIV an ID.

Just change your line 2 from <div class="newinner"> to <div class="newinner" id="newinner">

answered Nov 21, 2012 at 11:22

hj.sun

362 bronze badges

Collectives™ on Stack Overflow

Could someone explain why my javascript is not working?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related