Unable to select a html element in my javascript function

May 28, 2023

I am trying to select elements from my html within a javascript function but it keeps returning null. Not really sure what I am doing wrong here

this is my html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./app.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
        <tr>
            <th id="111">Title</th>
            <th>Author</th>
            <th>Pages</th>
            <th>Read</th>

        </tr>
    </thead>
    <tbody id="123" class="cla">

    </tbody>
    </table>
    
</body>
</html>

And this is my javascript code. in particular, i have tried to get elements inside displayBook but they all return null and I cant edit their innerText or perform appendChild on them. For example, the table, temp, testing variables are all null when i check them in console


function displayBook() {
    let table =document.getElementById("123")
    //console.log(table)
    let temp = document.getElementsByClassName("cla")
   // let a=document.createElement("p")
    //a.innerText='ansnsns'
    //table.appendChild(a)
    let testing = document.getElementById("111")
    console.log(testing)
    testing.innerText='abbbb'

    
    //console.log(temp)
    myLibrary.forEach(function(book) {
        let row=document.createElement("tr")
        let title = document.createElement("td")
        title.innerText=book.title
        let author = document.createElement("td")
        author.innerText=book.author
        let pages = document.createElement("td")
        pages.innerText=book.pages
        let read = document.createElement("td")
        read.innerText=book.read
        row.appendChild(title)
        row.appendChild(author)
        row.appendChild(pages)
        row.appendChild(read)
        table.appendChild(row)
    })
}

displayBook()

I would appreciate a point in the right direction or some advice.

>Solution :

Based on your code, it seems that the issue might be related to the timing of when your JavaScript code is executed. If your JavaScript code is being executed before the HTML elements are loaded, it can result in null values when trying to access the elements.

To ensure that your JavaScript code runs after the HTML elements have been loaded, you can either move your tag to the end of the HTML body or add defer attribute to the script tag.

Here are some solutions:

Move script tag to the end of the body:

<body>
  <!-- Your HTML code here -->
  
  <script src="./app.js"></script>
</body>

Use defer attribute
Using the defer attribute in your tag is another option to ensure that your JavaScript code is executed after the HTML has been parsed. The defer attribute tells the browser to defer the execution of the script until the HTML parsing is complete.

<head>
    <meta charset="UTF-8">
    <script src="./app.js" defer></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

Use the DOMContentLoaded event listener.
Using the DOMContentLoaded event is another approach to ensure that your JavaScript code is executed after the HTML has been fully loaded and parsed. The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", function() {
  displayBook();
});

There are two extra things I want to tell you about

Consistent ID and Class Naming: It’s a good practice to use consistent and meaningful names for IDs and classes in your HTML. In your code, you have an ID of "111" and a class of "cla", which might be confusing. Consider using more descriptive names that reflect their purpose.
Accessing Elements: Your attempt to access elements using getElementById and getElementsByClassName is correct. However, when using getElementsByClassName, note that it returns a collection of elements, so you need to access the specific element by index if you’re sure there’s only one element with that class name. In your case, document.getElementsByClassName("cla")[0] would give you the first element with the class "cla".