How to concatenate a string and an integer value in javascript?

Question

How to concatenate a string and an integer value in javascript?

Navigation

#1 by (3 votes)

2

Well, I have 15 similar lines in my code, and the only thing that changes is id of elements that end in an increasing integer and different from the others ...

I tried to replace these lines using a loop , but every time I try to run the code nothing happens. I used console.log and the variable is normal. But anyway, print an error saying that style can not be set to null element: 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>

' I think I could also replace the swith by:

for(i = 1; i < 5; i++) { if("temporada_" + i == obj.id) { document.getElementById('episodes_temp' + i).style.display="block"; break; } }

javascript string

asked by anonymous 13.01.2016 / 02:35

1 answer

How to find the foreigner from one table to another by Oracle? Comparator ArrayList JSP Object

score 3 · Accepted Answer

From what I saw in your code, the problem is structuring:

Your script has a function that, at least to what you've shown, is declared but not called. Possible solutions:

Add function to attribute onload of body :

 <body onload="mostrar_abas(obj)" >

Use method window.onload

window.onload = mostrar_abas;

or

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

Or even move the script tag of your head and put it at the end of body , so it will load after all elements have been rendered.

Since your function has an argument as an object, you will do the same thing but specify it;

In your case, you have elements that are dynamically created, I am either, or the time of your redirection in the DOM will be different from the others, including loading scripts. What I recommend:

Remove the function call from the onclick attribute and use JQuery, like this:

Simplest mode with JQUERY - Update

Add a class to all buttons that have a id='temporada_$i' , such as class="temporadas" , and add a class to all divs with id of episodes such as class="episodes" . This will be quite simple, since you are using loop . So, your code can boil down to this:

$(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
})

In the above function, the event is passed to the document and the element in question is specified only after it is dynamically created.