1

Preciso que em javascript puro e em tempo real o mesmo valor seja pego e dependendo dele (se for 1, 2, 3, 4, 5) somente a div correspondente apareça!

var inputvar = document.getElementById("numerodemqs_input"),
  number_mqs = document.getElementById("resultado1");
inputvar.addEventListener("input", function() {
  number_mqs.innerHTML = inputvar.value;
}, false);

/* Para deixar algo invisível */
function displayNone(NoneId) {
    document.getElementById(NoneId).style.display = "none";
  }
  /* Para deixar algo visível */

function displayBlock(BlockId) {
  document.getElementById(BlockId).style.display = "block";
}
 <h4>Quantas Media Queries o Header Est&aacute;tico possui?</h4>
<input id="numerodemqs_input" type="range" min="1" max="5" value="">
<h5 id="resultado1"></h5>
<div id="1">
  <h4>Este é para o 1.</h4>
</div>
<div id="2">
  <h4>Este é para o 2.</h4>
</div>
<div id="3">
  <h4>Este é para o 3.</h4>
</div>
<div id="4">
  <h4>Este é para o 4.</h4>
</div>
<div id="5">
  <h4>Este é para o 5.</h4>
</div>

1 Resposta 1

0

Alterei um pouquinho a logica do seu script, trabalhando com name para pegar os elementos que fazem parte do seu conjunto, e atribuindo uma data-* para armazenar o valor da div.

Solução 1:

var inputvar = document.getElementById("numerodemqs_input"),
number_mqs = document.getElementById("resultado1");

inputvar.addEventListener("input", function() {
  number_mqs.innerHTML = inputvar.value;
  /* Linha 1 */ var elementos = document.getElementsByName("div");
  /* Linha 2 */ for (i = 0; i < elementos.length; i++) {
    /* Linha 3 */ value_element = elementos[i].getAttribute('data-value');
    /* Linha 4 */ if (value_element == inputvar.value) {
      displayBlock(elementos[i]);
    } else {
      displayNone(elementos[i]);
    }
  }
}, false);

/* Para deixar algo invisível */
function displayNone(element) {
    element.style.display = "none";
  }
  /* Para deixar algo visível */

function displayBlock(element) {
  element.style.display = "block";
}
<h4>Quantas Media Queries o Header Est&aacute;tico possui?</h4>
<input id="numerodemqs_input" type="range" min="1" max="5" value="">
<h5 id="resultado1"></h5>
<div name="div" data-value="1">
  <h4>Este é para o 1.</h4>
</div>
<div name="div" data-value="2">
  <h4>Este é para o 2.</h4>
</div>
<div name="div" data-value="3">
  <h4>Este é para o 3.</h4>
</div>
<div name="div" data-value="4">
  <h4>Este é para o 4.</h4>
</div>
<div name="div" data-value="5">
  <h4>Este é para o 5.</h4>
</div>

Explicação do código acima:

Linha 1: Pego todos os elementos* dentro do formulário que possuem determinado name que eu definir, no caso div, e jogo dentro de um array;

Linha 2: Executo um for pra iterar em cima de cada elemento dentro do array, elementos.length me diz a quantidade de elementos que o array possui;

Linha 3: Pego o valor que esta dentro do atributo data-value do elemento;

Linha 4: Verifico se o valor do elemento input é o mesmo valor do elemento do laco atual, se for, é porque o elemento deve ser exibido, então mando a referencia dele para sua função, se não for, é porque não deve ser exibido;

*Obs: Note que estou pegando a referencia do elemento, e não o id, ou outro atributo, assim fica mais fácil altera-lo caso seja necessário.

Lembrando que os atributos do tipo data-* são uma implementação nova do html5, então para alguns navegadores mais antigos, ou dispositivos mobile possa não ter suporte, veja uma lista mais completa aqui, talvez uma melhor solução (cross-browsing) fosse um mix do que foi feito, so que pegando o id dos elementos pelo atributo name e com o id bloquear ou não a visualização.


Solução 2:

var inputvar = document.getElementById("numerodemqs_input"),
number_mqs = document.getElementById("resultado1");

inputvar.addEventListener("input", function() {
  number_mqs.innerHTML = inputvar.value;
  var elementos = document.getElementsByName("div");
  for (i = 0; i < elementos.length; i++) {
    value_element = elementos[i].getAttribute('id');
    if (value_element == inputvar.value) {
      displayBlock(elementos[i]);
    } else {
      displayNone(elementos[i]);
    }
  }
}, false);

/* Para deixar algo invisível */
function displayNone(element) {
    element.style.display = "none";
  }
  /* Para deixar algo visível */

function displayBlock(element) {
  element.style.display = "block";
}
<h4>Quantas Media Queries o Header Est&aacute;tico possui?</h4>
<input id="numerodemqs_input" type="range" min="1" max="5" value="">
<h5 id="resultado1"></h5>
<div id="1" name="div">
  <h4>Este é para o 1.</h4>
</div>
<div id="2" name="div">
  <h4>Este é para o 2.</h4>
</div>
<div id="3" name="div">
  <h4>Este é para o 3.</h4>
</div>
<div id="4" name="div">
  <h4>Este é para o 4.</h4>
</div>
<div id="5" name="div">
  <h4>Este é para o 5.</h4>
</div>

Explicação do código acima:

O código é similar ao anterior com exceção no atributo que usa para referenciar o elemento correto, em vez de usar um atributo do tipo data-*, eu uso o id.

3
  • Muito obrigado marcelo! Salvou demais, haha Teria como explicar um pouco aquele elementos.length? Valeuu Commented 21/01/2017 às 18:46
  • o atributo name serve para localizar ancoras, o atributo certo a ser usado neste caso seria uma class seguido de querySelectorAll() (ou getElementsByClassName().
    – MoshMage
    Commented 26/01/2017 às 13:58
  • @MoshMage note que no meu exemplo uso o name somente para localizar e pegar a referencia dos elementos que irei trabalhar, não existe uma norma para como se trabalhar nesses casos :) Commented 26/01/2017 às 17:59

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 .