Entrar Ainda não tem acesso?
1
resposta

Atribuindo valor a input cor

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 Leonardo Gouvêa Silva
| 71.1k xp | 42 posts

Olá pessoal, Primeiro, declarei no mundo HTML:

<input type = 'color'>

Para abrir a paleta de cores. No mundo JS, eu crio uma variável "cor", trazendo do mundo HTML o input:

var cor = document.querySelector('input')

Quando vou usar a cor no código, seguindo a orientação do instrutor, colocaria o nome da var acrescido de ".value" pra escolher e usar a cor.

pincel.fillStyle = cor.value;

Ao invés disso, eu tentei incluir na declaração da variável um ' .value' no final, de forma que ao declarar a variável ele já trouxesse o valor da cor junto:

var cor = document.querySelector('input').value

Mas não deu certo. A cor não sai do preto, mesmo que eu mude na paleta. Podem explicar?

1 resposta
por Lays Nogueira
| 268.5k xp | 42 posts
Analista de Sistemas

Olá Leonardo,

vc está colocando um metodo para mudar a cor quando vc seleciona na paleta?

Segue exemplo: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <input type = 'color' onchange="changeColor();">
    <div>
        teste teste teste
    </div>


</body>
</html>

<script type="text/javascript"></script>
<script>

    // para iniciar com a cor que já vem selecionada
    function init(){
        changeColor();
    }

    // para mudar a cor quando selecionado na paleta
    // usar metodo no input da paleta -> onchange
    function changeColor(){
        var cor = document.querySelector('input').value
        document.querySelector('div').style.backgroundColor = cor;
    }

    init();

</script>

Att,

Lays Nogueira