Html button onclick event not working

Question

I want html button "News"to show my div "New" which is hidden here's my code( it's not working right now):

<div id = "Buttons">
    <button id="News">News</button><br>
    <button id="Marks">Marks</button><br>
    <button id="Averages">Averages</button><br>
    <button id="Forum">Forum</button><br>
</div>  
<div id="New">
    <p id="Newer">Text</p>
</div>

#New{
        display: none;
        width: 500px;
        height: 500px;
        background-color: grey;
}

$(document).ready(function(){
    $("#News").click(function() {
        $("#New").show();
    });
});

That code is working fine...You must have something else that you haven't showed in the example. JSBIN DEMO: jsbin.com/lovategiva/edit?html,js,output — Brandon
– Brandon, Commented Mar 9, 2017 at 18:47
What a silly mistake my script tag was before jquery. Thank you guys for trying to help — Mantas Ptakauskas
– Mantas Ptakauskas, Commented Mar 9, 2017 at 18:56

smilebomb · Accepted Answer · 2017-03-09 18:50:11Z

2

<div id = "Buttons">
    <button id="News">News</button><br>
    <button id="Marks">Marks</button><br>
    <button id="Averages">Averages</button><br>
    <button id="Forum">Forum</button><br>
</div>  
<div id="New">
    <p id="Newer">Text</p>
</div>

<style>          <---------------this
#New{
        display: none;
        width: 500px;
        height: 500px;
        background-color: grey;
}
</style>          <---------------this

<script>          <---------------this
$(document).ready(function(){
    $("#News").click(function() {
        $("#New").show();
    });
});
</script>         <---------------this

answered Mar 9, 2017 at 18:50

smilebomb

5,5239 gold badges54 silver badges86 bronze badges

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

Comments

Cruiser · Accepted Answer · 2017-03-09 18:55:30Z

1

You can't just put styles and scripts as text into your HTML page. You have have to tell the browser what it should do with the code.

First, you need to wrap your code in the appropriate tags:

<style>
#New{
    display: none;
    width: 500px;
    height: 500px;
    background-color: grey;
}
</style>
<script>
$(document).ready(function(){
    $("#News").click(function() {
        $("#New").show();
    });
});
</script>

Second, you need to make sure JQuery is included before your script tag:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id = "Buttons">
    <button id="News">News</button><br>
    <button id="Marks">Marks</button><br>
    <button id="Averages">Averages</button><br>
   <button id="Forum">Forum</button><br>
</div>  
<div id="New">
    <p id="Newer">Text</p>
</div>

edited Mar 9, 2017 at 18:55

answered Mar 9, 2017 at 18:49

Cruiser

1,6162 gold badges16 silver badges20 bronze badges

1 Comment

Cruiser Over a year ago

You're welcome. please consider accepting the answer if it helped you.

Brandon · Accepted Answer · 2017-03-09 18:53:06Z

I'm assuming you're example is shortened up. Meaning, I'm assuming you have a <script> along with a <style>. If not, those are necessary. Also, I would seriously think about re-naming some of your stuff. For example, anytime you have a wrapper that represents a series of similar elements, use a class name instead of id. For example, I'd replace your div with a class instead of id like so:

<div class="buttons">
    <button id="news">News</button><br>
    <button id="marks">Marks</button><br>
    <button id="averages">Averages</button><br>
    <button id="forum">Forum</button><br>
</div>  

<div id="New">
    <p id="Newer">Text</p>
</div>

That being said, your code works as is if you add the appropriate tags like so:

<div class="buttons">
    <button id="news">News</button><br>
    <button id="marks">Marks</button><br>
    <button id="averages">Averages</button><br>
    <button id="forum">Forum</button><br>
</div>  

<style>
    #New{
        display: none;
        width: 500px;
        height: 500px;
        background-color: grey;
    }
</style>

<script>
    $(document).ready(function(){
        $("#News").click(function() {
            $("#New").show();
        });
    });
</script>

Collectives™ on Stack Overflow

Html button onclick event not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related