A intenção é correr os cinco [5] primeiros números carnidais em sequência sendo exibidos de cinco-em-cinco, mas devendo se apagado os anteriores e posteriormente correr mais cinco [10] (que vai do 6 à 10), até atingir um certo limite imposto dentro da função, ou seja, será determinado até que ponto esses numerais serão aplicados pelos botões 'incrementar' e 'desicrementar'. Tenho tentado da seguinte forma:
var spn = document.getElementsByTagName('span');
function mostrarGrupo() {
// Limitar o número de números a serem exibidos
var inicio = 5;
// Correr elementos span afim de quantificar
for (var i = 0; i < spn.length; i++) {
spn[i].innerHTML += inicio + 1;
inicio++
}
}
function esconderGrupo() {
// Limitar o número de números a serem exibidos
var inicio = 5;
// Correr elementos span afim de quantificar
for (var i = 0; i < spn.length; i--) {
spn[i].innerHTML += inicio + 1;
inicio--
}
}
<center>
<button id="menos" onclick="esconderGrupo">-</button>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<button id="mais" onclick="mostrarGrupo">+</button>
</center>
No momento estou pensando em outras soluções para este fim. No entanto, gostaria de ouvir ou ver o que vocês me sugerem?
esconderGrupo
emostrarGrupo
não são bons nomes, pois nada está de fato sendo escondido, e a informação sempre é mostrada (acho queincrementarGrupo
edecrementarGrupo
ficaria melhor, pois é isso que está sendo feito). Sugestão: jsfiddle.net/ez7L6b8c/1