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á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á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
.