Problemen met Javascript en document.getElementById
Ik ben bezig met een script om de inhoud van een input field
in een div te krijgen.
Hieronder staat een versimpelde versie van dit script.
En het script doet ook precies wat ik wil.
Namelijk: Wanneer de inhoud van de input veranderd komt er een tekst in de div te staan.
Maar dan nu het probleem.
Ik wil die div niet voor maar na het input field hebben staan
(vanwege de opmaak)
maar wanneer ik dit doe werkt het script ineens niet meer..
Wat kan hier de reden van zijn?
Alvast bedankt!
Stefan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function test()
{
document.getElementById("naam").innerHTML="Dit is een test";
}
//-->
</script>
</head>
<body>
<div id="naam">
</div>
<form name="form" action="test.php" method="post">
<input type="text" name="naam" onChange="test();" />
</form>
</body>
</html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function test()
{
document.getElementById("naam").innerHTML="Dit is een test";
}
//-->
</script>
</head>
<body>
<div id="naam">
</div>
<form name="form" action="test.php" method="post">
<input type="text" name="naam" onChange="test();" />
</form>
</body>
</html>
Gewijzigd op 29/10/2011 20:24:06 door Stefan Vermunt
- JavaScript altijd vlak voor </body> zetten, hierdoor krijg je geen problemen dat de DOM nog niet is geladen.
- Altijd een geldig doctype op regel 1 van je script
- <!-- //--> is ook ouderwets en niet nodig, elk browser kan tegenwoordig JS uitvoeren
- Een id kan maar 1 keer voorkomen op een pagina, een class meerdere keren. Je HTML code moet dus anders worden. En zodra je dat hebt krijg je dat je geen getElementById kan gebruiken, maar getElementsByClassName moet gebruiken. Je krijgt dan een array terug, waarbij je de laatste element pakt. Voorbeeldje: http://tinkerbin.com/QPCcfRCZ
Bedankt voor je supersnelle reactie!
Ik heb de foutjes die je aangaf aangepast, en hierdoor werkt het script nu
precies zoals ik het wilde!
Probleem opgelost dus!
Super bedankt!
Groetjes Stefan