Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

getElementsByClassName

queria mudar o background de varios inputs que tem uma mesma class chamada "x", como faço para isso acontecer, exemplo se o valor digitado no input é 1 o background deve mudar para "red" se for 0 deve mudar para "white" exemplo:

Como seria o script para dependendo do valor digitado o background ser alterado ?

8 respostas

Fala ai Thiago, ficaria mais ou menos assim:

Primeiro temos que ter o input e um botão para chamar a função:

<input id="valor">
<button class="btn" onclick="mudar();" type="button">mudar</button>

Depois vamos adicionar algumas div:

<div class="x"></div>
<div class="x"></div>
<div class="x"></div>

Agora basta construir a função que irá pegar o valor do input e mudar o background das divs:

function mudar() {
  let input = document.querySelector('#valor');
  let bg = input.value == 1 ? 'red' : 'white';
  let divs = document.querySelectorAll('.x');
  divs.forEach(div => div.style.backgroundColor = bg);
}

O exemplo pode ser visto aqui: http://codepen.io/mahenrique94/pen/xgxYzv

Experimente colocar 1 na input e clique em mudar, depois coloque 0 e clique em mudar.

Espero ter ajudado.

Oi Matheus tenho umas duvidas. 1 - tem que ter o botao. nao posso usar addEventListener "blur" pra fazer isso? 2 - pq vc preferiu usar querySelector no lugar de getElementyByClassName ? acho que por enquanto é isso

Thiago, pode fazer no blur do input sem problemas, apenas fiz com o botão para ficar mais fácil de ver a funcionalidade.

Para evitar a dúvida: "Qual devo utilizar getElementsByClassName, getElementById, getElementsByName, getElementsByTagName... ?", então adotei o padrão de utilizar apenas querySelector e querySelectorAll, em outras palavras, apenas capricho pessoal.

Se quiser utilizar o getElementsByClassName não tem o menor problema.

Ok Matheus só mais umas duvidas, só pude ver o link agora. let e var são a mesma coisa ?

vc fez as divs mudarem o background, gostaria de fazer isso com o background do input, tem como fazer um exemplo ? a ideia seria de ter varios inputs e dependendo do valor deles o background deles mudarem.

A diferença entre var e let é apenas seu escopo, variáveis declaras com a palavra var tem por padrão escopo local, ou seja:

function exemplo() {
    for(var i = 0; i < 10; i++) {
        // ...
    }
    console.log(i);
}

Porém se trocarmos o var para let no mesmo código o javascript irá gerar um erro pois variáveis declaras com let tem seu escopo por bloco, ou seja, só conseguiremos acessa-la dentro do for.

function exemplo() {
    for(var i = 0; i < 10; i++) {
        console.log(i);
    }
}

Segue exemplo atualizado da forma que você precisa, basta inserir um valor no primeiro input que ao sair do mesmo irá mudar a cor de todos os demais: https://jsfiddle.net/mahenrique94/wtn23u56/

OK entendi, só uma coisa cada input tem que ter seu background mudado dependendo do valor de cada um. Exemplo.

input valor 1 background red input valor 0 background white input valor 0 background white input valor 1 background red

deu pra entender ?

solução!

Segue atualização: https://jsfiddle.net/mahenrique94/wtn23u56/1/

Agora esta da forma que pediu.

Obrigado

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software