I have this working code:
<html>
<head>
<title>Bandom</title>
<script src="jquery-latest.js"></script>
<link href="bandom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<textarea maxlength="50" id="field1"></textarea>
<div id="field2"></div>
<script src="bandom.js" type="text/javascript"></script>
</div>
</body>
</html>
But when I call my .js file in the beginning in the head tag, javascript is not working. Why?
All my javascript do, is counting symbols.
$('#field1').keyup(function () {
var left = 50 - $(this).val().length;
$('#field2').text('Characters left: ' + left);
});
I had like plenty of projects, in some the position of javascript doesn't matter, but in some it does. Can anyone explain this to me.
I have this working code:
<html>
<head>
<title>Bandom</title>
<script src="jquery-latest.js"></script>
<link href="bandom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<textarea maxlength="50" id="field1"></textarea>
<div id="field2"></div>
<script src="bandom.js" type="text/javascript"></script>
</div>
</body>
</html>
But when I call my .js file in the beginning in the head tag, javascript is not working. Why?
All my javascript do, is counting symbols.
$('#field1').keyup(function () {
var left = 50 - $(this).val().length;
$('#field2').text('Characters left: ' + left);
});
I had like plenty of projects, in some the position of javascript doesn't matter, but in some it does. Can anyone explain this to me.
Share edited May 8, 2014 at 18:04 T.J. Crowder 1.1m200 gold badges2k silver badges2k bronze badges asked May 8, 2014 at 17:53 ignas3runignas3run 191 gold badge1 silver badge5 bronze badges 6- 1 Is there a console error you care to provide? – dckuehn Commented May 8, 2014 at 17:55
- 1 F12 opens the developer's console, the answer is probably there. – No Results Found Commented May 8, 2014 at 17:55
- 1 More people would be willing to look at this if you have a jsfiddle prepared. – Seiyria Commented May 8, 2014 at 17:55
- "But when I call my .js file in the beginning in the head tag..." I'm confused. In your quoted code, it's not in the beginning in the head tag, it's in the body (where it should be). ??? – T.J. Crowder Commented May 8, 2014 at 17:57
- 1 FYI "not working" doesn't tell us jack. Like literally nothing. – Sterling Archer Commented May 8, 2014 at 17:57
2 Answers
Reset to default 4But when I call my .js file in the beginning in the head tag, javascript is not working. Why?
The code within a script tag is run immediately when that tag is encountered in the markup (unless you use the defer or async attributes on the script tag.)
So if the script tag is in the head and you're trying to make use of elements defined later in the body, they don't exist when the code runs. In your case, the code:
$("#field1").keyup(function() { /*...*/});
...doesn't find any elements, and so doesn't hook up any handlers.
When the script tag is below the element in the markup (as in your quoted code), the element exists and so it can be found and used.
Best practice is to put your script tags at the bottom of the body, just before the closing </body> element. If you can't do that for some reason, second choice is to use jQuery's ready function.
Change to:
$(document).ready(function() {
$('#field1').keyup(function () {
var left = 50 - $(this).val().length;
$('#field2').text('Characters left: ' + left);
});
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744855710a4597390.html
评论列表（0条）