Using data attribute on radio button group to show text

Question

The outcome I am after is that when a user sends keyboard focus to a radio button group and navigates to each radio button using the arrow keys, or, clicks a radio button with a pointing device (mouse), the data-attribute value for that radio button is set to an element (h2).

I have got this far , and am now stuck. I am using an ID for the example, however, I would prefer to use a class or the data-set="X".

The code below sets the first data-col value but not the second.

Thanks for any help as I learn so much from Stackoverflow. I need this in vanilla JS and not jQuery, sorry.

<p>
<label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" data-set="Green" id="demo3">
</label>
 <label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" data-set="Blue" id="demo3">
</label>
</p>
<h2 id="chjkl"></h2>

document.getElementById('demo3').onclick = function changeClk() {
  const setCol = document.querySelector('#demo3');
  document.getElementById('chjkl').innerHTML = setCol.dataset.col

}
document.getElementById('demo3').onfocus = function changeFoc() {
const setCol = document.querySelector('#demo3');
  document.getElementById('chjkl').innerHTML = setCol.dataset.col
}
    

Answer 1

Use the event.target to get the dataset.

In the example below I change the color of your h2 elements background. Note that I am passing the event into the function and calling the function in the eventListener.

Also rather than having two eventListeners, I add a class to the radio button and then query that using querySelectorAll(). Then run the nodeList through a loop and check the event.target when the eventListener is fired.

An issue with your code is you have more than one element with the same ID. You should not have more than one element with any unique ID. ID must be unique to only one single element.

let radio = document.querySelectorAll('.radio')
let target = document.getElementById('chjkl')

function changeColor(e) {
  target.style.backgroundColor = e.target.dataset.col
  target.textContent = e.target.dataset.col
}

radio.forEach(btn => {
  btn.addEventListener('focus', changeColor)
})

#chjkl {
  display: flex;
  justify-content: center;
  letter-spacing: 1.3rem;
}

<p>
  <label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" class="radio">
</label>
  <label for="">The colour is Red
<input type="radio" name="bob" data-col="Red" class="radio">
</label>
  <label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" class="radio">
</label>
  <label for="">The colour is Orange
<input type="radio" name="bob" data-col="Orange" class="radio">
</label>
</p>
<h2 id="chjkl"></h2>