Question

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

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

实时预览： https://codepen.io/Elkazi/pen/wvJeErg

Answer 1

这是因为当点击其中一个标签时，相关单选的勾选值仍然没有变化。

试试这个

 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'));

Answer 2

由于您要向 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);
        }
    }

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

2 个答案: