jQuery not loading on HTML

Question

I got this code I'm wanting to use and it won't respond. I know the code it right because it's on jsfiddle: http://jsfiddle.net/User86745458/ztz4Lf23/

But when I copy-paste this code, it does nothing:

<!DOCTYPE HTML>    
<html>
<head>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script>$('button').click(function(){        
    $('textarea').text($('textarea').text() + $(this).text());
    //$('input:text').val($('textarea').text() );
    $('input:text').val($('input:text').val() + ' ' +  $(this).data('stuff'));
});

</script>

</head>
<body>

<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>  
<input type='text'/>
<br/><br/>  
<textarea></textarea>

</body>
</html>

I can't find a syntax error though. Thanks in advance

looks ok. i presume the opening html and head tags are in there. Place the script at the end of the page after the last html tag and see if it helps. thats the same as enclosing it in a document ready function -- learn.jquery.com/using-jquery-core/document-ready — Tasos
– Tasos, Commented Mar 5, 2015 at 2:39
@James111 i was typing while you posted your answer 20secs before :) — Tasos
– Tasos, Commented Mar 5, 2015 at 2:41

Jordan Honeycutt · Accepted Answer · 2015-03-05 02:45:25Z

1

Interesting thing to remember: Code that manipulates the DOM needs to execute after the page finishes loading.

Funny thing about JSFiddle is it wraps all of your javscript in an onload listener by default. That's why it worked so well there but gave you trouble in the real world. You're not going crazy.

answered Mar 5, 2015 at 2:45

Jordan Honeycutt

3382 silver badges8 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Put you Jquery Code into a $(document).ready(function() { });

Like so:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script>


$(document).ready(function(){ 

   $('button').click(function(){        
        $('textarea').text($('textarea').text() + $(this).text());
        //$('input:text').val($('textarea').text() );
        $('input:text').val($('input:text').val() + ' ' +  $(this).data('stuff'));
    });
}); //End of document.ready
    
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 5, 2015 at 2:38

James111

16k17 gold badges89 silver badges130 bronze badges

Comments

Lumi Lu · Accepted Answer · 2015-03-05 02:46:30Z

0

Here http://learn.jquery.com/using-jquery-core/document-ready/ is good resource for this.

I would like to wrap your following js code into

$(function(){
  // Your js code
});

It would be something like this,

<script type='text/javascript'>
$(window).load(function(){
$('button').click(function(){        
    $('textarea').text($('textarea').text() + $(this).text());
    //$('input:text').val($('textarea').text() );
    $('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
}); 
});    
</script>

answered Mar 5, 2015 at 2:46

Lumi Lu

3,3011 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery not loading on HTML

3 Answers 3

Comments

Like so:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Like so:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related