Base: Add test page for HTML input type=radio elements

This commit is contained in:
Timothy Flynn 2021-04-03 09:03:11 -04:00 committed by Andreas Kling
parent 136d774885
commit 274e94224d
Notes: sideshowbarker 2024-07-18 20:52:28 +09:00
2 changed files with 53 additions and 0 deletions

View file

@ -0,0 +1,52 @@
<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>
<script>
const hp = document.getElementsByName('hp');
for (let i = 0; i < hp.length; ++i) {
hp[i].addEventListener('change', function() {
if (this.checked) {
console.log('HP house:', this.value);
}
});
}
const got = document.getElementsByName('got');
for (let i = 0; i < got.length; ++i) {
got[i].addEventListener('change', function() {
if (this.checked) {
console.log('GoT house:', this.value);
}
});
}
</script>
</body>

View file

@ -46,6 +46,7 @@ span#loadtime {
<li><a href="float-3.html">floating boxes with overflow=hidden</a></li>
<li><a href="padding-inline.html">inline elements with padding</a></li>
<li><a href="event-bubbling-and-multiple-listeners.html">event bubbling and multiple listeners</a></li>
<li><a href="radio.html">radio button</a></li>
<li><a href="checkbox.html">checkbox</a></li>
<li><a href="canvas-rotate.html">canvas rotate()</a></li>
<li><a href="margin-collapse-2.html">margin collapsing 2</a></li>