Using Javascript Commands After Including Into Page

Question

I have a page with three tables (Table A, Table B, Table C), which I want to display depending on which button the user clicks. I am able to do this just fine with the following script:

var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");

var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");

btnTabA.onclick = function () {
    tableA.style.display = "table";
    tableB.style.display = "none";
    tableC.style.display = "none"; }

btnTabB.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "table";
    tableC.style.display = "none"; }

btnTabC.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "none";
    tableC.style.display = "table"; }

However, I also want to include the html code for these tables into this page. I am also able to do this with the following script:

$(function(){   $("#include-tables").load("P1/1_0/table.html"); });

That said I cannot get these to work together. For example, when I combine all of this -- see sample code below -- my tables are included, but the buttons no longer work. If I check the error log in the browser, it says Null is not a object, and so I think the issue is to due with all variables and Id's being defined before the code for the button executes. That said with my (very) limited knowledge of javascript I am have not been able to figure out how to resolve this.

$(function(){
 $("#include-tables").load("/1_0/tables.html");
});

var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");

var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");

btnTabA.onclick = function () {
    tableA.style.display = "table";
    tableB.style.display = "none";
    tableC.style.display = "none";
}
btnTabB.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "table";
    tableC.style.display = "none";
}
btnTabC.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "none";
    tableC.style.display = "table";
}

#tableA {
}

#tableB {
    display: none;
}

#tableC {
    display: none;
}

<div id="include-tables"></div>
 
<div class="button-div">
 <input type="button" id="showTableA" value="TableA">
 <input type="button" id="showTableB" value="TableB">
 <input type="button" id="showTableC" value="TableC">
</div>

<script src="script.js"></script>

Could you please repost with correct formatting? Use code formatting for Javascript code, not quotation. — Barmar, Jan 12 '17 at 23:53

score 1 · Answer 1 · edited May 23 '17 at 12:33

.load() is asynchronous, so you can't access the elements until after it completes. Put all your code in its callback function.

$(function(){
    $("#include-tables").load("/1_0/tables.html", function() {
        var tableA = document.getElementById("tableA");
        var tableB = document.getElementById("tableB");
        var tableC = document.getElementById("tableC");

        var btnTabA = document.getElementById("showTableA");
        var btnTabB = document.getElementById("showTableB");
        var btnTabC = document.getElementById("showTableC");

        btnTabA.onclick = function () {
            tableA.style.display = "table";
            tableB.style.display = "none";
            tableC.style.display = "none";
        }
        btnTabB.onclick = function () {
            tableA.style.display = "none";
            tableB.style.display = "table";
            tableC.style.display = "none";
        }
        btnTabC.onclick = function () {
            tableA.style.display = "none";
            tableB.style.display = "none";
            tableC.style.display = "table";
        }
    });
});

Or you could use event delegation to bind event handlers to dynamically-added elements. See Event binding on dynamically created elements?

Using Javascript Commands After Including Into Page

1 Answers1