CODEWITHSUNDEEP
javascript
awesome49
awesome49

Reputation: 9

DOM queires javascript

What I'm asking is why my output is now displaying you can just look at whats in the script? Getting syntax error that div_id is null. Also my output is just showing a broken image. Could really use some help?

<!DOCTYPE html>
<meta charset="utf-8"/>
//Gregory McConville DOM queries
<HTML>
<style type="text/css">

table {

}
p .example {
}
td {
    height: 50px;
    width: 50px;
    border: 1px solid;
}


</style>
<body>
<div id="example">Inside Content</div>
<div id="content">
    <table>
        <tr class="row1">
            <td>1</td>
            <td>2</td>
            <td id="first">3</td>
            <td class="last-column">4</td>
        </tr>
        <tr class="row2">
            <td>5</td>
            <td id="third">6</td>
            <td>7</td>
            <td class="last-column">8</td>
        </tr>
        <tr class="row-a">
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td class="last-column">12</td>
        </tr>
        <tr id="last-row" class="row-b">
            <td>13</td>
            <td id="last">14</td>
            <td>15</td>
            <td class="last-column">16</td>
        </tr>
    </table>
</div>
<p>
Please select the following and output it's results using console.log(). Once you select the element console.log() the element object. When asked for the value also console.log() the value of the element using the innerHTML property. An example of both is provided in the console.
</p>

<p>APIs you will use in this Assignment:</p>
<ol>
<li>getElementById</li>
<li>getElementsByClassName</li>
<li>querySelector</li>
<li>querySelectorAll</li>
</ol>


<p>Not using querySelector or querySelectorAll:</p>
<ol>
<li>An element with the ID of "last-row". Also output the value of this element</li>
<li>Select the elements with that have the Class of "last-column"</li>
</ol>

<p>Using the querySelector or querySelectorAll:</p>
<ol>
<li>Select elements that have both the Class of "row2" and "last-column" and output it. Be careful what order you select the classes in</li>
<li>Select the element with the ID of "last". Also output the value of this element</li>
<li>Select the element that is the "Table" element</li>
</ol>

<p>Output:</p>
<img src="imgs/Assignment-dom-queries-output.png" />
</p>
</body>
<script type="text/javascript">
var exampleEl = document.getElementById('example');
console.log("exampleEl");
console.log("exampleEl.innerHTML");

   if (typeof example !== 'undefined') {
    }
        var div_id = document.querySelector("#heading");
        div_id.innerHTML = ("exampleEl");

        var div_id = document.querySelectorAll("p .example");
        console.log("div id");

       var div_id= document.getElementById("exampleEL");
    console.log("div id");
    //ctrl+shft+i
    div_id.innerHTML = ("exampleEL");

        var tr_class = document.getElementsByClassName("last-column");
        console.log(last-column);
        // HTMLCollection
        console.log(nameEls[14]);
        for (var i = 14; i < nameEls.length; i++) {
            tr_class[i].innerHTML = ("example");
        };

</script>
        <div> id="example"(Inside Content);</div>
        <tr> id="last-row" class="row-b"</tr>
[td.last-column, td.last-column, td.last-column, td.last-column]
<td><class="last-column">(8)</td>
<td><id="last">(14)</td>
14
<table></table>
</HTML>

Upvotes: 1

Views: 66

Answers (2)

lpezzolla
lpezzolla

Reputation: 23

You get that error because in the snippet above there is no DOM element with id heading.

As per the image, the only possible reason is that the path is wrong

Upvotes: 1

Aswathy Balan
Aswathy Balan

Reputation: 504

In your HTML there is no element with ID as heading. So document.querySelector("#heading"); will return null. So div_id.innerHTML = ("exampleEl"); will throw error as div_id is null.

Upvotes: 1

Related Questions