blob: 5859ad87dc482b4257b173e0391e01031a6525d7 (
plain)
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<body>
<b>Pick your house!</b>
<br />
<input type=radio id=gryffindor name=hp value=Gryffindor>
<label for=gryffindor>Gryffindor</label>
<br />
<input type=radio id=hufflepuff name=hp value=Hufflepuff>
<label for=hufflepuff>Hufflepuff</label>
<br />
<input type=radio id=ravenclaw name=hp value=Ravenclaw>
<label for=ravenclaw>Ravenclaw</label>
<br />
<input type=radio id=slytherin name=hp value=Slytherin>
<label for=slytherin>Slytherin</label>
<br />
<br />
<b>Pick your other house!</b>
<br />
<input type=radio id=stark name=got value=Stark>
<label for=stark>Stark</label>
<br />
<input type=radio id=lannister name=got value=Lannister>
<label for=lannister>Lannister</label>
<br />
<input type=radio id=baratheon name=got value=Baratheon>
<label for=baratheon>Baratheon</label>
<br />
<input type=radio id=targaryen name=got value=Targaryen>
<label for=targaryen>Targaryen</label>
<br />
<br />
<b>Selected</b>
<br />
<div style="display: inline-block;">
<pre>HP house: <span id=hp></span></pre>
<pre>GoT house: <span id=got></span></pre>
</div>
<script>
const hp = document.getElementsByName('hp');
for (let i = 0; i < hp.length; ++i) {
hp[i].addEventListener('change', function() {
if (this.checked) {
document.getElementById('hp').innerHTML = this.value;
}
});
}
const got = document.getElementsByName('got');
for (let i = 0; i < got.length; ++i) {
got[i].addEventListener('change', function() {
if (this.checked) {
document.getElementById('got').innerHTML = this.value;
}
});
}
</script>
</body>
|
