Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como usar document.querySelector('input') para diferentes inputs?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Desenhando com o mouse com infinitas cores

por Eduardo Soares Penido
| 157.1k xp | 3 posts
Engenheiro de Dados

Além da possibilidade de escolher as cores do pincel, eu gostaria de incluir no código uma opção de cores para o fundo.

Então eu basicamente repeti o raciocínio de criar variáveis no Java que correspondessem ao pincel e ao fundo e depois atribuir valores a elas, provenientes do html, por meio da document.querySelector.

Mas acontece que acabei ficando com duas tags input iguais. Isso atrapalhou o funcionamento do meu querySelector.

Como faço para que o querySelector consiga distinguir entre um tipo de input e o outro?

Desde já, obrigado.

<canvas width="1500" height="600"></canvas>
<br>
Escolha a cor do pincel  <input type="color"> // 1º input
<br>
<br>
Escolha a cor do fundo  <input type="color"> // 2º input

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var paleta = document.querySelector('input'); // Esta variável deveria receber o valor do 1º input 
    var fundo = document.querySelector('input'); // Esta variável deveria receber o valor do 2º input

    var desenha = false

    pincel.fillStyle = fundo.value; // Deveria receber o valor da variável "fundo", referente ao 2º input
    pincel.fillRect(0, 0, 1500, 600);

    function desenhaCirculo(evento) {

        if(desenha){
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = paleta.value;// Deveria receber o valor da variável "paleta", referente ao 1º input
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }

        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar(){
        desenha = true;
    }

    function desabilitaDesenhar(){
        desenha = false;
    }

    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;

</script>
1 resposta
solução!
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Eduardo, Tudo bem?

Olha só... o querySelector pode "achar" tags, ids, classes, atributos... Não se prende apenas a tag não.

Fiz umas adaptações no código para mudar a cor. 1º adicionei os IDs nas tags dos inputs para poder capturar cada um no JavaScript

2º criei uma função (alterarCorDoFundo) para receber a cor selecionada e pintar o retangulo

3º criei um botao, ao lado do segundo input, que servirá para "atualizar" a cor do fundo

4º capturei o botao e adicionei um "escutador" de click para chamar a função que altera o fundo após o clique no botão.

Segue abaixo:

<canvas width="1500" height="600"></canvas>
<br>
Escolha a cor do pincel <input id="cor-pincel" type="color">
<br>
<br>
Escolha a cor do fundo <input id="cor-fundo" type="color"> <button id="alterar-fundo">Mudar Cor</button>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var paleta = document.querySelector('#cor-pincel'); // Esta variável deveria receber o valor do 1º input 
    var fundo = document.querySelector('#cor-fundo'); // Esta variável deveria receber o valor do 2º input

    var desenha = false

    pincel.fillStyle = fundo.value; // Deveria receber o valor da variável "fundo", referente ao 2º input
    pincel.fillRect(0, 0, 1500, 600);

    function desenhaCirculo(evento) {

        if (desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = paleta.value;// Deveria receber o valor da variável "paleta", referente ao 1º input
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }

        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar() {
        desenha = true;
    }

    function desabilitaDesenhar() {
        desenha = false;
    }

    function alterarCorDoFundo() {
        pincel.fillStyle = fundo.value;
        pincel.fillRect(0, 0, 1500, 600);
    }

    const btnFundo = document.querySelector('#alterar-fundo')
    btnFundo.addEventListener('click', () => {
        alterarCorDoFundo()
    })

    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;

</script>

Por último, gostaria de deixar aqui as formas mais comuns de captura pelo querySelector:

querySelector('#id")

querySelector('.classe')

querySelector('tag')

Se ficou alguma dúvida ou questionamento, pode enviar que tento te ajudar mais.

Abraço!