JavaScript is not working on my html document

Question

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.

I think you have a typo. Change `fadeOut('slow')` to `fadeIn('slow')`. [This might come in handy](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms/932657#932657) if you find that the page is changing before your fading effect happens. — Mike Cluck, Oct 21 '16 at 18:18
Okay I apologize for the typo. It is changed to fadeIn() however still nothing happens. Does it have to do with the display:none? — Jaxon Crosmas, Oct 21 '16 at 18:22
@JaxonCrosmas [Works fine for me](https://jsfiddle.net/wa9fmu8p/) after putting in the fixes I suggested. — Mike Cluck, Oct 21 '16 at 18:25

score 3 · Accepted Answer · answered Oct 21 '16 at 18:25

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

score 1 · Answer 2 · answered Oct 21 '16 at 18:26

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>

score 0 · Answer 3 · answered Oct 21 '16 at 18:25

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>

score 0 · Answer 4 · answered Oct 21 '16 at 18:36

0

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

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

answered Oct 21 '16 at 18:36

Wolfgang Criollo

138
5

score 0 · Answer 5 · answered Oct 21 '16 at 18:38

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>

JavaScript is not working on my html document

5 Answers5