Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot read properties of null (reading 'firstChild')

I’m working entirely with javascript, and webpack generates the HTML file after I run the build.

Here are the different modules of my code:

index.js

import { renderLayout } from './layout.js';
import { generateDialog } from './dialog.js';
import './style.css';
    
renderLayout();

const btnAddItem = document.querySelector('button#addItem');

btnAddItem.addEventListener('click', () => { generateDialog(); });

layout.js

// some code

const div2 = document.createElement('div');
const titleDisplays = document.createElement('div');
div2.appendChild(titleDisplays);

// some more code

function renderLayout() {
    document.body.appendChild(div2);
}

export {renderLayout};

dialog.js

import * as myFn from './list.js'

const dialog = document.createElement('dialog');
const submit = document.createElement('button');
submit.type = 'submit';
submit.value = 'default';
submit.id = 'confirmBtn';
submit.innerHTML = 'Confirm';

// some more code

function generateDialog() {
    document.body.appendChild(dialog);
    dialog.showModal();
}

submit.addEventListener('click', event => {
    dialog.close();
    newList(input.value); // input.value is the value inside the variable 'value' that points to a text input field
    updateUI();
})

export { generateDialog };

list.js

export const titleDisplays = document.querySelector('div.sidebar div');
export let lists = []
export let listItems = []

export function newList(list) {
    localStorage.setItem(list, [])
    localStorage.setItem(Math.round((localStorage.length + 1) / 2), list);
}

export function emptyUI() {
    while (titleDisplays.firstChild != undefined) {
        titleDisplays.removeChild(titleDisplays.firstChild);
    }
}

The code works completely fine in its entirety except for the emptyUI() function, which returns a ‘cannot read properties of null’ error, indicating that the titleDisplays variable is null, or not detected by the DOM or something, and I can’t understand why and how to fix it.

Tags:

2

Answers


  1. 0

    First check for existence of titleDisplays and only after that for titleDisplays.firstChild:

    export function emptyUI() {
    while (titleDisplays && titleDisplays.firstChild) {
        titleDisplays.removeChild(titleDisplays.firstChild);
    }
}

    Though it’s not clear why you’re using a while loop here.
    Is it really needed?
    You can, for example, check periodically for existence of element with setInterval

    Login or Signup to reply.
  2. 0

    reference this.

    <script>
    // Accessing the parent element
    var parent = document.getElementById('parent');

    // Accessing the first child element
    var firstChild = parent.firstChild;

    // Checking if the first child exists and is an element node
    if (firstChild && firstChild.nodeType === Node.ELEMENT_NODE) {
        console.log('First child:', firstChild);
    } else {
        console.log('No first child element found.');
    }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search