O problema é que cada vez que clicar no botão branco ou preto, um novo listener é adicionado a todos os outros botões.
E como addEventListener é acumulativo, no fim cada botão pode acabar ficando com vários listeners, o que é desnecessário.
Eu detalho melhor esse problema no meu comentário.
Mas a ideia de usar dataset é boa, tanto que acabei usando também - de uma forma diferente, embora a ideia geral seja similar.
So repassando o codigo ficou da seguinte forma:
HTML
<h3>Personalize sua placa</h3>
<div class="product-tune">
<label>Placa</label>
<div class="tune-colors">
<input type="radio" name="tone" aria-label="Cor da placa Branca" value="white" >
<input type="radio" name="tone" aria-label="Cor da placa Preto" value="black">
</div>
<label>Detalhes</label>
<div class="tune-colors">
<input type="radio" name="color" aria-label="Azul" data-tone-white="/public/azul-off.opti.webp" data-tone-black="/public/azul-off-dark.opti.webp" value="blue">
<input type="radio" name="color" aria-label="Laranja" data-tone-white="/public/orange.opti.webp" data-tone-black="/public/orange-dark.opti.webp" value="orange">
<input type="radio" name="color" aria-label="Rosa" data-tone-white="/public/pink.opti.webp" data-tone-black="/public/pink-dark.opti.webp" value="pink">
<input type="radio" name="color" aria-label="Cinza" data-tone-white="/public/grey.opti.webp" data-tone-black="/public/grey-dark.opti.webp" value="grey">
<input type="radio" name="color" aria-label="Dourado" data-tone-white="/public/gold.opti.webp" data-tone-black="/public/gold-dark.opti.webp" value="gold">
</div>
meu javascript
const btnColors = document.querySelectorAll(".tune-colors input[name='color']");
const productImg = document.querySelector(".product img")
function changeImg(pathImg, frameColor, boardColor, ) {
productImg.setAttribute("src", pathImg)
productImg.style.filter = "grayscale(0)"
productImg.setAttribute("alt", "Placa com QR Code" + " " + frameColor + " " + "personalizada" + " " + "com detalhes em" + " " + boardColor)
}
for (let detailColor of btnColors) {
detailColor.addEventListener('change', function (event) {
let boardColor = document.querySelector("input[name='tone']:checked");
if (!boardColor) {
alert('Ops, Escolha a cor da placa antes 😉');
return;
}
switch (boardColor.value) {
case "white":
changeImg(
pathImg = detailColor.dataset.toneWhite,
frameColor = "Branca" ,
boardColor = detailColor.ariaLabel
)
break;
case "black":
changeImg(
pathImg = detailColor.dataset.toneBlack,
frameColor = "Preta" ,
boardColor = detailColor.ariaLabel
)
default:
break;
}
});
}