I changed the logic of your script a bit, working with name to get the elements that are part of your set, and assigning a data-* to store the value of div .
Solution 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>
Explanation of the above code:
Line 1: I get all the elements * within the form that they have
given name that I set, in the div case, and play within a
array ;
Line 2: I execute a for to iterate over each element in
of array , elementos.length tells me how many elements the
array has;
Line 3: I get the value that is within the data-value attribute of
element;
Line 4: Verify that the value of the input element is the same as the
element of the current loop, if it is, is because the element should be displayed,
then I give him his reference to his function, if it is not, it's because
should not be displayed;
* Note: I'm getting the element reference, not id , or another attribute, so it's easier to change it if it is
necessary.
Remembering that data-* attributes are a new implementation of html5 , so for some older browsers, or mobile devices may not be supported, see a more complete list here , maybe a better solution (cross-browsing) was a mix of what was done, only that taking the id of elements by the attribute name e with id blocking the view or not.
Solution 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>
Explanation of the above code:
The code is similar to the previous one except in the attribute that uses to reference the correct element, instead of using an attribute of type data-* , I use id .
