jQuery werkt niet
Ik ben Joep, 13 jaar, en ben vandaag begonnen met op codecademy jQuery te leren,
nu probeer ik het zelf uit te voeren, maar het lukt niet.
Wat doe ik fout?
index.html:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<input type="text" id="input"/>
</form>
</body>
</html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<input type="text" id="input"/>
</form>
</body>
</html>
script.js
Code (php)
1
2
3
4
2
3
4
$(document).ready(function(){
var $input = $('#input');
$input.focus(function(){$input.css('outline-color', '#FF0000')})
});
var $input = $('#input');
$input.focus(function(){$input.css('outline-color', '#FF0000')})
});
In jouw geval heb je de variabele $input welke in de functie scope van .ready zit. Dit is geen global, omdat je er var voor hebt staat. Alles zonder var de eerste keer is global. Dit is een bad practise, voorkomen dus.
In de callback van .focus (de functie daar) begin je weer een nieuwe functie scope. Hierin heb je dus geen bereik meer met de $input variabele van de root scope.
In JavaScript kun je de huidige scope bereiken met this. Dus in de .ready functie scope is this.$input de input variabele (maar ook $input).
jQuery maakt handig gebruik van het this keyword door deze te verbinden met het huidige element. In de callback van focus is $(this) het element waarop de focus wordt gelegt (#input dus). Vervolgens kun je daar de .css functie op aanroepen: $(this).css(...)
Wat er overigens ook nog fout gaat is dat je jQuery niet inlaad.
Nog 6 andere tips:
1. Je mist een doctype op de eerste regel: <!doctype html> Dit is het enige verplichte element in HTML, vergeet hem niet!
2. Plaats scripts bij voorkeur vlak voor </body>, hierdoor heb je geen problemen met 'dom not ready' en laadt je pagina sneller.
3. Plaats alles op meerdere regels, dat maakt je code leesbaarder:
Code (js)
1
2
3
2
3
$input.focus(function () {
$(this).css('..', ...);
});
$(this).css('..', ...);
});
4. Stijl element niet door met de .css functie te werken, maar stijl ze doormiddel van een CSS class:
Code (js)
1
$(this).addClass('input--focus');
Code (css)
1
.input--focus { outline-color:#ff0000; }
5. vergeet geen punt komma's. Na de }) van .focus moet nog een punt komma komen
6. Om JavaScript errors te lezen en om javascript te debuggen gebruik je de console in je browser (F12 in IE of Ctrl + J in alle andere browsers). In de console kun je JavaScript errors zien en met de console.log() functie kun je variabele naar de console loggen, om zo te kijken wat zijn waarde is.
extra 7. Gebruik iets als http://jshint.com/ om te kijken of je code goed JavaScript is
extra 8. Gebruik stricte JavaScript door in het begin van je script 'use strict'; te plaatsen
ik heb mijn scripts aangepast,
maar het werkt nog steeds niet...
Quote:
Heeft dit er iets mee te maken?Wat er overigens ook nog fout gaat is dat je jQuery niet inlaad.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<input type="text" class="input" id="input"/>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<input type="text" class="input" id="input"/>
</form>
</body>
</html>
Code (php)
1
2
3
4
2
3
4
$(document).ready(function () {
$('input').focus(function () {
$('this').css('outline-color', '#FF0000')});
});
$('input').focus(function () {
$('this').css('outline-color', '#FF0000')});
});
Toevoeging op 03/11/2013 19:30:36:
Is er anders een manier om te testen of jQuery überhaupt wel werkt? Ik neem aan dat mijndomein jQuery wel ondersteund
Gewijzigd op 03/11/2013 19:29:41 door Joep -
Maar je laadt jQuery nog niet in.
Joep de Jong op 03/11/2013 19:28:25:
Quote:
Heeft dit er iets mee te maken?Wat er overigens ook nog fout gaat is dat je jQuery niet inlaad.
Wat denk je zelf?!
En wat houdt je tegen om het te testen of het er iets mee te maken heeft?
Je hebt het over het gebruik van jquery, dan lijkt het logisch dat je daar ook iets voor moet regelen. ;-)
Toevoeging op 03/11/2013 19:44:51:
Joep de Jong op 03/11/2013 19:43:28:
Hoe laad je jQuery in?
Je bent 13 jaar. Als er een generatie is opgegroeid met internet.....
Google al geprobeerd?! ;-)
het werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
<script src="./scripts/jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).css('outline-color', '#FF0000')
});
});
</script>
</head>
<body>
<form>
<input type="text" class="input" id="input"/>
</form>
</body>
</html>
<html>
<head>
<script src="./scripts/jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).css('outline-color', '#FF0000')
});
});
</script>
</head>
<body>
<form>
<input type="text" class="input" id="input"/>
</form>
</body>
</html>
sorry dat ik niet op google had gekeken.
