addEventListener

HTML

<p>Base</p>
<input type="radio" name="base" value="vanilla" id="b1"><label for="b1">Vanilla</label>
<input type="radio" name="base" value="chocolate" id="b2"><label for="b2">Chocolate</label>
<input type="radio" name="base" value="coffee" id="b3"><label for="b3">Coffee</label>
<p>Fruit</p>
<input type="radio" name="fruit" value="banana" id="f1"><label for="f1">Banana</label>
<input type="radio" name="fruit" value="apple" id="f2"><label for="f2">Apple</label>
<input type="radio" name="fruit" value="pear" id="f3"><label for="f3">Pear</label>
<p>Spread</p>
<input type="radio" name="spread" value="peanut butter" id="s1"><label for="s1">Peanut Butter</label>
<input type="radio" name="spread" value="nutella" id="s2"><label for="s2">Nutella</label>
<input type="radio" name="spread" value="cream cheese" id="s3"><label for="s3">Cream Cheese</label>
<pre></pre>

JavaScript

const data = {};

document.querySelectorAll('input[type=radio]').forEach(elem => {
  elem.addEventListener('input', function() {
    data[this.name] = this.value;
    log(JSON.stringify(data));
  });
})






























function log(msg) {
  document.querySelector('pre').textContent = msg;
}