JS function to hide or show elements

Question

I have to JSON files, I load them both into two tables like this:

      $(window).load(function(){    
        $.getJSON('http://1xxxxxx/xxxxx_1_18.json', function(data) {
        var output="<div class='outer'>";
        for (var i in data.lbclassic118) {          
            output+="<div style='visibility:hidden;' class='lbclassic118'id="+"age" + data.lbclassic118[i].ageinweeks+">"+ '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks)'+ data.lbclassic118[i].ageinweeks+'</strong></center></th></tr><tr><td rowspan="3">Body Weight (g)</td><td>average</td><td><strong>'+ data.lbclassic118[i].average+'</strong></td></tr><tr><td>range min</td><td><strong>'+ data.lbclassic118[i].rangemin+'</strong></td></tr><tr><td>range mmax</td><td><strong>'+ data.lbclassic118[i].rangemmax+'</strong></td></tr><tr><td rowspan="3">feed sonsumption</td><td>kj bird day</td><td><strong>'+ data.lbclassic118[i].kjbirdday+'</strong></td></tr><tr><td>g bird day</td><td><strong>'+ data.lbclassic118[i].gbirdday+'</strong></td></tr><tr><td>cumulative</td><td><strong>'+ data.lbclassic118[i].cumulative+'</strong></td></tr></table>' +"</div>";
        }
        output+="</div>";
        document.getElementById("placeholder1").innerHTML=output;
        });
  });   


  $(window).load(function(){    
        $.getJSON('http://xxxxxx/xxxxxx.json', function(data) {
        var output="<div class='outer'>";
        for (var i in data.lbclassic1990) {         
            output+="<div style='visibility:hidden;' class='lbclassic1990'id="+"age" + data.lbclassic1990[i].ageinweeks+">"+ '<table class="table table-responsive"><tr class="cabecera"><th colspan="3"><center><strong>Age (weeks) '+ data.lbclassic1990[i].ageinweeks+'</strong></center></th></tr><tr><td>Egg No. per H.H.</td><td>cumul.</td><td><strong>'+data.lbclassic1990[i].cumul+'</strong></td></tr><tr><td rowspan="2">Rate of Lay %</td><td>per H.H.</td><td><strong>'+data.lbclassic1990[i].perhh+'</strong></td></tr><tr><td>per H.D.</td><td><strong>'+data.lbclassic1990[i].perhd+'</strong></td></tr><tr><td rowspan="2"> Egg Weight (g)</td><td>egg weight in week</td><td><strong>'+data.lbclassic1990[i].eggweightinweek+'</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>'+data.lbclassic1990[i].eggmasscumul+'</strong></td></tr><tr><td rowspan="2">Egg Mass -- g/H.D. -- kg/H.H.</td><td>egg mass in week</td><td><strong>'+data.lbclassic1990[i].eggmassinweek+'</strong></td></tr><tr><td>egg mass cumul.</td><td><strong>'+data.lbclassic1990[i].eggmasscumul2+'</strong></td></tr></table>' +"</div>";
        }
        output+="</div>";
        document.getElementById("placeholder2").innerHTML=output;
        });
  });

The information comes up as it should, I have no problems with that. However, what I'm trying to do is just show ONE table at a time, not all the tables at the same time (don't want a table for each element in the JSONs) to be seen, but only one a time.

For that I'm implemeting a function that with a slider control will show or hide the tables.

Here's an images of the HTML output data structure:

Now, what I want to to is hide or show different DIVs (tables) with this script:

<script>
        function leslider(valor) {
            var elementos_lbclassic118 = document.getElementsByClassName("lbclassic118");
            var elementos_lbclassic1990 = document.getElementsByClassName("lbclassic1990");
            var total_elementos = elementos_lbclassic118.length + elementos_lbclassic1990.length;
                        var i;
                        for (i = 1; i < total_elementos.length+1; i++) {
                                document.getElementById("age"+i).style.visibility = "hidden";
                        }
                document.getElementById("age"+valor).style.visibility = "visible";  
        }

However it won't work, the 1st JSON will show all the elements but never hide it, and the second one will place them all on top of each other, not sure where I'm failing.

Answer 1

I guess you are wrong "leslider" function. How to use this "leslider" function, let's me see this code.

Answer 2

I found the culprit, I was getting length from a numeric, value. Here's the updated function.

<script>
        function leslider(valor) {                  
            var elementos_lbclassic118 = document.getElementsByClassName("lbclassic118");               
            var elementos_lbclassic1990 = document.getElementsByClassName("lbclassic1990");             
            var total_elementos = elementos_lbclassic118.length + elementos_lbclassic1990.length;                           
                        var i;
                        for (i = 1; i < total_elementos+1; i++) {
                                document.getElementById("age"+i).style.display = "none";
                        }                           
                document.getElementById("age"+valor).style.display = "block";   
        }