2

Estou tentando fazer um elemento div trocar de cor de fundo quando selecionar a cor do meu input usando Js. Eu não estou conseguindo alguem pf me ajude ?

<style>
    .corExemplo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 30px;
        float: left;
    }
</style>

<script>
    function trocaCor(){
        var cor = getElementById("corum").value;
        document.getElementById("boxum").style.backgroundColor = cor;
    }
</script>

<div id="boxum" class="corExemplo">Teste</div>

<form action="#" style="clear: both;">
    <label for="corum">Cor 1</label>
    <input type="color" id="corum" onchange="trocaCor();">
</form>

2 Respostas 2

2

Faltou só o document. prefixando getElementById("corum").value;

Veja abaixo o código funcionando:

function trocaCor(){
   var cor = document.getElementById("corum").value;
   document.getElementById("boxum").style.backgroundColor = cor;
}
    .corExemplo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 30px;
        float: left;
    }
<div id="boxum" class="corExemplo">Teste</div>

<form action="#" style="clear: both;">
    <label for="corum">Cor 1</label>
    <input type="color" id="corum" onchange="trocaCor();">
</form>

7
  • Nossa eu nem percebi... Olhei o código inteiro inumeras vezes. Muito obrigado!
    – Victor
    29/08/2016 às 22:03
  • Todos nós passamos por isso inúmeras vezes!!!! Funcionou? 29/08/2016 às 22:05
  • Sim, como eu queria! Estou começando agora no Js, não esta sendo muito fácil rsrsrsr
    – Victor
    29/08/2016 às 22:06
  • Por acaso seria marcar como respondido ? pq só posso fazer isso daqui uns 2min rsrs
    – Victor
    29/08/2016 às 22:08
  • Posso aproveitar e pedir uma ajudinha em outro codigo ?
    – Victor
    29/08/2016 às 22:13
1

A resposta do Allan funciona perfeitamente. Irei apenas adicionar um exemplo com o addEventListener para fins de conhecimento.

Você pode utilizar o Element.addEventListener() para "esperar um evento" e realizar a troca da cor.

Para seu exemplo eu consideraria algo desnecessário, mas como disse que está iniciando no mundo do JavaScript agora, acho que seria algo muito interessante de você ver.

Seu exemplo utilizando esse método ficaria da seguinte forma:

var cor = document.getElementById("corum");

cor.addEventListener("change", function() {
    document.getElementById("boxum").style.backgroundColor = cor.value;
}, false);
.corExemplo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 30px;
  float: left;
}
<div id="boxum" class="corExemplo">Teste</div>

<form action="#" style="clear: both;">
    <label for="corum">Cor 1</label>
    <input type="color" id="corum">
</form>

Dessa forma, eu adiciono o evento change() ao input pelo addEventListener(), e não diretamente no input.

3
  • Nossa, não conhecia esta maneira...Muito legal, se eu for colocar um Js externo o codigo fica mais limpo correto ? No caso, ali no lugar do "change", precisa ser propiamente esse evento ?
    – Victor
    29/08/2016 às 22:25
  • @Victor É comum separar o JS do HTML, mas não é uma regra. Sobre o change, você precisa passar um válido para o que é esperado. Se colocar o evento input também funcionará. Essa abordagem é muito utilizado ao desenvolver libs, pois necessita de algo dinâmico e não podendo fazer a "amarração" diretamente no HTML, pois você não sabe como será o código que quem irá utilizar.
    – Randrade
    29/08/2016 às 22:51
  • Entendi, obrigado pela ajuda, eu estou lendo mt essa pagina do mozilla, tem mt coisa de js lá, antes estava estudando pelo iMasters mais eu fiquei meio perdido quando entrou no POO, e estou recomeçando dnv rsrsrs
    – Victor
    29/08/2016 às 22:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .