JavaScript我必须单击两次才能选择元素

请任何人都可以帮助解决我的代码问题，有时我必须单击两次以选择下一个元素

var varientbtn = document.getElementsByClassName('clickthisbtn');

    for(let i = 0; i < varientbtn.length; i++) {
        varientbtn[i].onclick = function () {
          
            const rbs = document.querySelectorAll('input[name="choice"]');
            let selectedValue;
            let varientSelectedPrice;
          
            for (const rb of rbs) {
              if (rb.checked) {
                selectedValue = rb.value;
                varientSelectedPrice = rb.getAttribute("data-price");
                break;
              }
            }
            document.getElementById('log').innerHTML = selectedValue;
            document.getElementById('varientprice').innerHTML = varientSelectedPrice;
            console.log(selectedValue, varientSelectedPrice);
        }
    }

var varientbtn=document.getElementsByClassName（'clickthisbtn'）；
for（设i=0；i

现场预览：

---

由于要将事件侦听器添加到label元素，因此应该使用其for属性来获取相关的输入字段。这样，您就不必对所有输入运行循环，并且始终可以获得最新/正确的值

这将指向调用事件处理程序的元素

var varientbtn = document.getElementsByClassName('clickthisbtn');

    for(let i = 0; i < varientbtn.length; i++) {
        varientbtn[i].onclick = function () {
         let relatedInput = document.getElementById(this.getAttribute("for"));
            let selectedValue = relatedInput.value;
            let varientSelectedPrice = relatedInput.getAttribute("data-price");;
            document.getElementById('log').innerHTML = selectedValue;
            document.getElementById('varientprice').innerHTML = varientSelectedPrice;
            console.log(selectedValue, varientSelectedPrice);
        }
    }

var varientbtn=document.getElementsByClassName（'clickthisbtn'）；
for（设i=0；i

这是因为当单击其中一个标签时，相关收音机的选中值仍然没有改变

试试这个

 const rbs = document.querySelectorAll('input[name="choice"]');

    for(let i = 0; i < rbs.length; i++) {
        rbs[i].addEventListener('change', function () {
            let selectedValue;
            let varientSelectedPrice;
          
            for (const rb of rbs) {
              if (rb.checked) {
                selectedValue = rb.value;
                varientSelectedPrice = rb.getAttribute("data-price");
                break;
              }
            }
            document.getElementById('log').innerHTML = selectedValue;
            document.getElementById('varientprice').innerHTML = varientSelectedPrice;
            console.log(selectedValue, varientSelectedPrice);
        });
    }

    rbs[0].dispatchEvent(new Event('change'));

const rbs=document.querySelectorAll（'input[name=“choice”]”）；
for（设i=0；i

我明白了，我刚开始学习JS，我的技能不是很好，我检查过它现在运行得很好，谢谢