CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jaxon Crosmas
Jaxon Crosmas

Reputation: 589

JavaScript is not working on my html document

I have a button on my HTML document as listed below

<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">

And I have this block of jQuery at the bottom of the document. It is supposed to fade in the div with the id "gold" when the button is clicked.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeIn('slow');
  });
});
</script>

However the code does not seem to work/trigger and nothing happens. Any suggestions to why this is happening is greatly appreciated.

Note: display: none is applied to the "gold" div in css, but I want the div to fade in once the button is clicked.

Upvotes: 0

Views: 107

Answers (5)

James
James

Reputation: 729

try this

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <input type = "submit" value = "button" class = "col-sm-1" style="white-  space:normal;" id = "mac">
    <div id="gold" style="display:none">
    hello
    </div>
    <script>
            $(document).ready(function () {
                $('#mac').click(function(){ 
                   $('#gold').fadeIn('slow')
            });
    });
    </script>

Upvotes: 0

Wolfgang Criollo
Wolfgang Criollo

Reputation: 158

If your div#gold is display:none; you need to update your jQuqery to fadeIn("slow")

 $('#mac').click(function(){  
 $('#gold').fadeIn('slow');
 })

Upvotes: 0

t_dom93
t_dom93

Reputation: 11466

Here is working example:

$(document).ready(function () {
  $("#mac").click("input", function(){    
    $('#gold').fadeOut('slow');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "submit"   id = "mac"value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;">

<div id="gold">Some content</div>

Upvotes: 1

Jeff
Jeff

Reputation: 291

Change your javascript like this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('#mac').click(function(){   
    $('#gold').fadeOut('slow');
  });
});


</script>

Upvotes: 0

labue
labue

Reputation: 2623

Split up your script tags:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeOut('slow');
  });
});
</script>

Edit: JSFiddle

Upvotes: 3

Related Questions