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