Property als object
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
27
28
29
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
27
28
29
<script>
Console = {
textarea: document.getElementById("console"),
log: function(str) {
this.textarea.value += str;
},
close: function() {
},
};
function start() {
Console.log("First text");
}
</script>
<style>
#console {
width: 800px;
height: 400px;
background-color: #111111;
color: white;
font-weight: bold;
font-family: courier;
padding: 2px;
overflow: auto;
}
</style>
<div><button onclick="start()">Start</button></div>
<textarea id="console"></textarea>
Console = {
textarea: document.getElementById("console"),
log: function(str) {
this.textarea.value += str;
},
close: function() {
},
};
function start() {
Console.log("First text");
}
</script>
<style>
#console {
width: 800px;
height: 400px;
background-color: #111111;
color: white;
font-weight: bold;
font-family: courier;
padding: 2px;
overflow: auto;
}
</style>
<div><button onclick="start()">Start</button></div>
<textarea id="console"></textarea>
Ik heb al vanalles geprobeerd, maar de textarea blijft null.
Het lukt me maar niet om dit werkend te krijgen.
Ik wil dus dat de property textarea de textarea is, en dat ik die dus steeds kan gebruiken in de andere methods van dit object.
Waarom deze code niet werkt: Je gaat opzoek naar een element voordat het bestaat, dat kan natuurlijk niet. Je kan 2 dingen doen (ik zou ze allebei doen):
- Plaats de js code vlak voor </body>, hierdoor weet je zeker dat alle html code bestaat voordat je opzoek gaat naar elementen.
- gebruik het window.onload event om er zeker van te zijn dat de hele dom is aangemaakt voordat de js code wordt uitgevoerd.