Bom, eu possuo 15 linhas semelhantes em meu código e a unica coisa que muda é o id
dos elementos que terminam em um número inteiro crescente e diferente dos demais...
Eu tentei substituir essas linhas usando um loop, mas sempre que tento rodar o código nada acontece. Usei o console.log
e a variável está normal. Mas mesmo assim print uma mensagem de erro dizendo que o estilo nao pode ser setado em um elemento null: Uncaught TypeError: Cannot read property 'style' of null
`
<script>
function showSeason(obj) {
/*document.getElementById('episodes_temp1').style.display="none";
document.getElementById('episodes_temp2').style.display="none";
document.getElementById('episodes_temp3').style.display="none";
document.getElementById('episodes_temp4').style.display="none";*/
for(i = 1; i < 5; i++) {
document.getElementById('episodes_temp' + i).style.display="none";
}
//essa parte eu tbm queria por em um loop, mas nao tenho ideia de como fazer
//como serao diversos itens criar 50 cases nao seria uma boa escolha :(
switch (obj.id) {
case 'temporada_1':
document.getElementById('episodes_temp1').style.display="block";
break
case 'temporada_2':
document.getElementById('episodes_temp2').style.display="block";
break
case 'temporada_3':
document.getElementById('episodes_temp3').style.display="block";
break
case 'temporada_4':
document.getElementById('episodes_temp4').style.display="block";
break
}
}
</script>
</head>
<body>
<?php
echo "<p></p>";
for($i = 1; $i < 5; $i++) {
echo "<button type='button' id='temporada_$i' onclick='showSeason(this)'> Temporada $i </button>";
}
for($x = 1; $x < 5; $x++) {
echo "<div id='episodes_temp$x' style='display:none;'>";
for($i = 1; $i < 50; $i++) { //50 é um valor de teste, pretendo puxar do banco da dados;
echo "item $i";
}
echo "</div>";
}
?>
</body>
` penso que eu poderia tbm substituir o swith por:
for(i = 1; i < 5; i++) {
if("temporada_" + i == obj.id) {
document.getElementById('episodes_temp' + i).style.display="block";
break;
}
}
'divAba' + i
, pode ter certeza, reveja isso. Também, seria adequado postar a parte do seu HTML, afinal não podemos adivinhar o restante do seu código. – felipsmartins 13/01/16 às 1:41getElementById
é uma função, que recebe como argumento umastring
, e no momento da concatenação, o argumento é retornado com o ` i `, sem problemas. Como pode ver nesse exemplo: jsfiddle.net/SamirChaves/xcxj3skp . Creio que o problema é o restante do código. – Samir Braga 13/01/16 às 1:47Cannot read property
é justamente pelo fato degetElementById
retorna null por não achar no DOM um elemento com o ID que se está buscando. - À propósito, também sou de Fortaleza. – felipsmartins 13/01/16 às 1:49