Radio change events

by IceCreamYou

HTML

<p>
Try selecting the radio buttons with arrow keys and clicking.
</p>
<fieldset id="radios">
  <p>
    <label>
      <input type="radio" value="one" name="radio-group-name" checked>
      <span class="label">one</span>
    </label>
  </p>
  <p>
    <label>
      <input type="radio" value="two" name="radio-group-name">
      <span class="label">two</span>
    </label>
  </p>
  <p>
    <label>
      <input type="radio" value="three" name="radio-group-name">
      <span class="label">three</span>
    </label>
  </p>
</fieldset>
<div id="logs">
</div>

CSS

#logs {
  background-color: #FAFAFA;
  border: 1px solid #CCC;
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre;
}

JavaScript

const radios = document.getElementById('radios'),
	log = document.getElementById('logs');
radios.addEventListener('change', (event) => {
	const p = document.createElement('p');
  p.textContent = event.target.value;
  log.insertBefore(p, log.firstChild);
});