Javascript 使用单选按钮组上的数据属性显示文本

我所追求的结果是，当用户将键盘焦点发送到单选按钮组并使用箭头键导航到每个单选按钮，或者使用定点设备（鼠标）单击单选按钮时，该单选按钮的数据属性值设置为元素（h2）

我已经走了这么远，现在被卡住了。我在示例中使用了一个ID，但是，我更喜欢使用一个类或数据集=“X”

下面的代码设置第一个数据列值，但不设置第二个数据列值

谢谢你的帮助，因为我从Stackoverflow中学到了很多。我需要的是香草JS，而不是jQuery，对不起

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

颜色是绿色的
颜色是蓝色的

document.getElementById（'demo3'）。onclick=function changeClk（）{
const setCol=document.querySelector（'#demo3'）；
document.getElementById（'chjkl'）。innerHTML=setCol.dataset.col
}
document.getElementById（'demo3'）。onfocus=函数changeFoc（）{
const setCol=document.querySelector（'#demo3'）；
document.getElementById（'chjkl'）。innerHTML=setCol.dataset.col
}

使用

事件.target

获取数据集

在下面的示例中，我更改了

h2

元素背景的颜色。请注意，我正在将

事件

传递到函数，并调用

事件侦听器中的函数

另外，我没有两个
事件监听器
，而是在单选按钮中添加了一个类，然后使用
queryselectoral（）
查询该类。然后通过循环运行节点列表，并在触发事件侦听器时检查
事件.target

代码的一个问题是您有多个具有相同ID的元素。您不应该有多个具有唯一ID的元素。ID必须仅对一个元素唯一


let radio=document.querySelectorAll（“.radio”）
让target=document.getElementById（'chjkl'）
函数更改颜色（e）{
target.style.backgroundColor=e.target.dataset.col
target.textContent=e.target.dataset.col
}
radio.forEach（btn=>{
btn.addEventListener（'focus'，changeColor）
})
#chjkl{
显示器：flex；
证明内容：中心；
字母间距：1.3rem；
}

颜色是绿色的
颜色是红色的
颜色是蓝色的
颜色是橙色的

太好了，谢谢，太简单了。关于唯一ID，这是我所知道的。我只在这种情况下使用，因为我无法获得任何其他方法来工作。