Executando verificação de segurança...
Em resposta a < > Código se funcionou está certo? </ > Resolvido: Trocando imagens com radio e javascript
2
lesnock

Cara, seu código funciona e é claro no que faz. E acho que isso é o que mais importa.
No entanto, eu sempre tento pensar em deixar código de forma que a manutenção no futuro seja fácil. Por exemplo, ao invés de criar um id para cada botão, você poderia criar um atributo igual para todos os botões e outro atributo com a url da imagem.
Ficaria mais ou menos assim:

No HTML criamos o atributo data-button para cada botão e adicionamos outro atributodata-image-url que armazena a url da imagem que irá aparecer quando aquele botão for clicado:

<button data-button data-image-url=¨/public/azul-off.opti.webp¨>Blue</button>
<button data-button data-image-url=¨/public/orange-off.opti.webp¨>Orange</button>
<button data-button data-image-url=¨/public/pink-off.opti.webp¨>Pink</button>
<!-- ... -->

E aí no Javascript você apenas cria um loop que vai automaticamente adicionar os event listeners para cada botão:

document.querySelectorAll('[data-button]').forEach(button => {
    button.addEventListener('click', () => {
        changeImage(button.dataset.imageUrl)
    })
}

Desta forma, se no futuro você precisar adicionar uma nova cor, a única coisa que você vai precisar fazer é adicionar um novo botão com a URL da nova imagem.

Se você nunca utilizou atributos do tipo data talvez este código esteja um pouco confuso para você. Link para você entender melhor sobre os data attributes.

Espero ter ajudado!

1
denerGarcia

achei muito interessante essa abordagem com data.
é disso que to falando ficaria mais enxuto o codigo, esse tipo de filling que preciso pegar sabe

1
kht

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.

1
denerGarcia

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