<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>
