2

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; } }

6
  • 2
    Isso acontece porque de fato você não tem no DOM qualquer elemento com ids '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. 13/01/2016 às 1:41
  • @felipsmartins, na verdade a o getElementById é uma função, que recebe como argumento uma string, 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. 13/01/2016 às 1:47
  • 2
    @SamirBraga Eu entendi o que ele está tentando fazer. E é justamente por isso que a questão dele está faltando detalhes. A mensagem de erro Cannot read property é justamente pelo fato de getElementById retorna null por não achar no DOM um elemento com o ID que se está buscando. - À propósito, também sou de Fortaleza. 13/01/2016 às 1:49
  • Primeira pessoa aqui das redondezas que vejo por aqui... rsrs... Pois é, concordo, a espera de novos detalhes Naine... 13/01/2016 às 1:52
  • @Naine, onde está esse script? Ele pode estar sendo carregado antes do elemento em questão. Tente colocá-lo ao final de seu documento, assim ele será carregado depois que todos os elementos foram rederizados. 13/01/2016 às 2:11

1 Resposta 1

2

Pelo que vi em seu código, o problema está na estruturação:

Seu script possui uma função que, pelo menos ao que você mostrou, é declarada, mas não é chamada. Possíveis soluções:

Adicionar a função ao atributo onload do body:

 <body onload="mostrar_abas(obj)" >

Usar o método window.onload

window.onload = mostrar_abas;

ou

window.onload = function(){
    //conteúdo da função aqui
}

Ou ainda deslocar a tag script do seu head e pô-la ao final do body, assim ele será carregado depois que todos os elementos foram renderizados.

Como sua função tem como argumento um objeto, você fará a mesma coisa porém especificando-o;

No seu caso você possui elemtnos que são criados dinamicamento, sou seja, seja o tempo de sua rederização no DOM será diferente dos outros, inclusive do carregamento de scripts. O que lhe recomendo:

Retirar a chamado da função do atributo onclick e usar JQuery, assim:

Modo mais simples COM JQUERY - Update

Adicione uma class a todos os buttons que tem um id='temporada_$i' como, por exemplo, class="temporadas", e adicione uma class a todas divs com id de episodes como, por exemplo, class="episodes". Isso será bem simples, já que você está usando o loop. Assim, seu código pode se resumir a isso:

$(document).on('click', '.temporadas', function() {
  $('.episodes').hide(); //Esconde todos as div de episódios
  var idNum = $(this).attr('id').match(/[0-9]+$/);// captura o número do botão que foi clicado
  $('#episodes_temp'+idNum).show(); //mostra somente o  div de episódios correspondente ao botão
})

Na função acima o evento é passado ao documento e o elemnto em questão é específicado só após por conta que estessão criados dinamicamente.

5
  • pastebin.com/BEBsG3Kx é mais ou menos isso. Peço desculpas se o meu código estiver fora dos padroes eu realmente nao sei como estou indo, é a minha primeira tentativa em fazer um site, me jogaram esse desafio e eu entrei nessa semana passada, sem saber nada de programação web -'
    – user37798
    13/01/2016 às 2:57
  • 1
    @Naine, não tem que pedir desculpa, a tentativa é o que nos leva a aprender ;). Imagino que agora saiba qual o problema, vou dar mais uma olhada e lhe aviso... 13/01/2016 às 3:02
  • 2
    @Naine Você linkou o jquery? Caso não, basta adicionar ao seu head: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 13/01/2016 às 3:44
  • 1
    Executando a mesma função via console (F12) ocorre o esperado? Copie e cole no console e clique em tal botão.
    – Inkeliz
    13/01/2016 às 3:50
  • 1
    @Naine Olhe aqui: pastebin.com/jktwFaL6 13/01/2016 às 3:52

Você deve fazer log-in para responder a esta pergunta.