Manipulando opções com a tag Select e funções no JavaScript #1

JavaScript, e seus poderes fenomenais, vão nos acompanhar num projeto de Calculadora de IMC nos próximos artigos.

A ideia é construir uma aplicação que entregue conceitos básicos, mas bem feitos, em HTML, CSS e JavaScript.

E hoje vamos falar de manipulação de opções com a Tag select e functions do JavaScript

O Projeto

Para exemplificar esse e outros hacks básicos de JavaScript estarei usando um projeto de Calculadora de IMC

Projeto em desenvolvimento

No HTML

No nosso exemplo, manipulei imagens, onde cada opção possuí uma imagem correspondente.

O primeiro passo

é usar a tag img para adicionar as imagens no HTML.

<img id="image" height="200" src="images/man.png" alt="">
<!-- <img height="200" src="images/woman.png" alt=""> -->

A imagem que aparecerá quando o site for carregado deverá ter o id="image", enquanto as outras ficaram comentadas e sem id.

No JavaScript

Após isso

é possível criar as opções utilizando as tags select e option em conjunto.

<select onchange="changingSelection(this)">
        <option value="">Selection</option>
        <option value="man">Man</option>
        <option value="woman">Woman</option>
</select>

E aqui vem a mágica

O uso do evento onChange nos permite que alguma ação seja realizada após uma mudança. Nesse caso, ao selecionar a opção, vamos alterar o src do id="img" e como consequência, a imagem será alterada.

const image = document.getElementById("image")

function changingSelection(selection){
    const value = selection.value;

    if (value == "man"){
        image.src = "images/man.png";

    } else if (value == "woman") {
        image.src = "images/woman.png";

    }
}

Ao capturar o valor do Select, a função vai comparar os resultados e entregar a imagem da opção selecionada. Caso seja vazio, vale o que está no HTML, que nesse caso é a imagem que deixamos sem comentário.

Nessa aplicação, o select é opcional e uma forma de aplicar conceitos básicos, mas a adaptação dessas linhas de código para outros usos te dá infinitas possibilidades. Enfim, divirta-se!

Esse é um post escrito por mim ✨❤️

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no Instagram ou por e-mail no contato.elisadrumond@gmail.com