Edit History

Hi. I want to add an additional description on the product page when we select an attribute, let's say with a value of 153. After selecting attribute 153, the "buttondesc" div appears. Everything works fine, but when selecting an attribute other than 153, the description should be hidden. What am I doing wrong? I using js.

document.addEventListener('DOMContentLoaded', function() {
    function checkSelectedInput() {
        const buttondescDiv = document.querySelector('.buttondesc');
        const radioInputs = document.querySelectorAll('input[type=radio][name="group[1]"]');
        let shouldShow = false;
        
        radioInputs.forEach((input) => {
            if(input.checked && parseInt(input.value) === 153) {
                shouldShow = true;
            }
        });

        buttondescDiv.style.display = shouldShow ? 'block' : 'none';
    }
    
    document.body.addEventListener('change', function(e) {
        if(e.target.matches('input[type=radio][name="group[1]"]')) {
            checkSelectedInput();
        }
    });

    checkSelectedInput(); //sprawdzenie stanu przy załadowaniu strony
});

I modified the code like this: it also doesn't work

document.addEventListener('DOMContentLoaded', (event) => {
    const inputs = document.querySelectorAll('input[type="radio"]');
    inputs.forEach(input => {
        input.addEventListener('change', function() {
            const buttondesc = document.querySelector('.buttondesc');

            if(this.value == '153') {
                buttondesc.style.display = 'block';
            } else {
                buttondesc.style.display = 'none';
            }
        });
    });
});

Hi. I want to add an additional description on the product page when we select an attribute, let's say with a value of 153. After selecting attribute 153, the "buttondesc" div appears. Everything works fine, but when selecting an attribute other than 153, the description should be hidden. What am I doing wrong? I using js.

document.addEventListener('DOMContentLoaded', function() {
    function checkSelectedInput() {
        const buttondescDiv = document.querySelector('.buttondesc');
        const radioInputs = document.querySelectorAll('input[type=radio][name="group[1]"]');
        let shouldShow = false;
        
        radioInputs.forEach((input) => {
            if(input.checked && parseInt(input.value) === 153) {
                shouldShow = true;
            }
        });

        buttondescDiv.style.display = shouldShow ? 'block' : 'none';
    }
    
    document.body.addEventListener('change', function(e) {
        if(e.target.matches('input[type=radio][name="group[1]"]')) {
            checkSelectedInput();
        }
    });

    checkSelectedInput(); //sprawdzenie stanu przy załadowaniu strony
});

I modified the code like this: it also doesn't work

document.addEventListener('DOMContentLoaded', (event) => {
    const inputs = document.querySelectorAll('input[type="radio"]');
    inputs.forEach(input => {
        input.addEventListener('change', function() {
            const buttondesc = document.querySelector('.buttondesc');

            if(this.value == '153') {
                buttondesc.style.display = 'block';
            } else {
                buttondesc.style.display = 'none';
            }
        });
    });
});