Question 183028 in Html Question posted in
Some basic documentation can be found here.

Html – getElementById not returning the <div> element identified by the Id

When I load this page, it complains that the variable elem is null:

<?php
/*
To test javascript to change the contents of a select element 
*/
$titleUnit = 'all';
?>
<html>
<head>
</head>
<body>
<script>
const jobTitles = new Map();
const unit1titles = [];
const unit2titles = [];
jobTitles.set("P1", "Programmer");
unit1titles.push("P1");
jobTitles.set("A1", "Analyst");
unit1titles.push("A1");
jobTitles.set("C3", "Custodian");
unit2titles.push("C3");
jobTitles.set("L4", "Landscaper");
unit2titles.push("L4");
</script>

<table border=1 cellspacing=0 cellpading=5>
    <tr>
        <td>
            <table border=0>
                <tr>
                    <td valign='center' class="formLabel">Job Title</td>
                    <td class="formLabel"> &nbsp;&nbsp;<I>In Unit:</td>
                    <td valign='center' class="formLabel">
                        <input type='radio' name='titleUnit' value="U1" onclick="changeTUnit('U1')"<?php echo ($titleUnit=='U1' ? ' CHECKED' : ''); ?>> Unit 1
                        <input type='radio' name='titleUnit' value="U2" onclick="changeTUnit('U2')"<?php echo ($titleUnit=='U2' ? ' CHECKED' : ''); ?>> Unit 2
                        <input type='radio' name='titleUnit' value="all" onclick="changeTUnit('all')"<?php echo ($titleUnit=='all' ? ' CHECKED' : ''); ?>> All
                    </td>
                </tr>
            </table>
        </td>
        <td class="formLabel">
            Job Code
        </td>
    </tr>
    <tr>
        <td class="formField">
            <select name="jt[]" MULTIPLE size=5 class="text9ptBlack">
                <option value="">Select Job Title</option>
                <div id='jTitles'></div>
            </select>
        </td>
        <td class="formField">
            <select name="jt[]" MULTIPLE size=5 class="text9ptBlack">
                <option value="">Select Title Code</option>
                <div id='tCodes'></div>
            </select>
        </td>
    </tr>
</table>
<script>
function changeTUnit(newUnit) {
    var titleIH = "";
    var tCodes = [];
    switch (newUnit) {
        case 'all': tCodes = jobTitles.keys(); break;
        case "U1": tCodes = unit1titles.values(); break;
        case "U2": tCodes = unit2titles.values(); break;
    }
    for (let tC of tCodes) {
        titleIH += "<option value='" + tC + "'>" + jobTitles.get(tC) + "</option>n";
        codeIH += "<option value='" + tC + "'>" + tC + "</option>n";
    }       
alert("titleIH=n" + titleIH); 
    var elem = document.getElementById('jTitles'); 
    elem.innerHtml = titleIH; 
}

document.addEventListener("load", changeTUnit('all'));
</script>
</body>
</html>
Tags:

2

Answers


  1. 0

    variable jobTitles is not defined:

    enter image description here

    Login or Signup to reply.
  2. 0

    One issue is with this line:

    document.addEventListener("load", changeTUnit('all'));

    You are actually invoking the changeTUnit function here, rather than referencing it. Instead, the line should be:

    document.addEventListener("load", function() { changeTUnit('all') });

    So that you can add a function reference that, in turn, calls the real function with its argument.

    Also, your code relies on inline scripts, which are really a very old way of incorporating script into your HTML page. When this is done, some of your code can wind up executing as soon as the HTML parser encounters the script instead of waiting until the entire page loads. The simplest way to ensure that no code executes until the HTML is ready to be parsed is to just add your <script> just prior to the closing body tag. No event handler is needed.

    Next, you are embedding div elements inside of select elements, which is not allowed.

    You’re also using deprecated HTML when you add your table and input attributes. CSS should be used for all styling. And, along those lines tables should not be used for layout as you are doing. Tables are for tabular data only.

    You should clean up your HTML to make it valid before trying to diagnose your script issues.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search