[Bug] Add Null Checks for DOM Manipulation to Prevent Runtime Errors

[shivam8112005]

Description

Some parts of the JavaScript codebase lack proper null checks when manipulating DOM elements. This can lead to unexpected errors or crashes when trying to access or modify elements that might be null or undefined, especially when elements are dynamically created or loaded.

Reproduction

1. Navigate to any part of the application where DOM elements are dynamically manipulated or loaded (e.g., elements added/removed via JavaScript).
2. Ensure that a specific DOM element expected to be present is not found (null or undefined).
3. Try to interact with the element (e.g., applying styles, setting content).
4. Observe the application behavior as it crashes or throws an error due to missing null checks.
5. See error.

Expectation

The code should check if DOM elements exist before trying to manipulate them. Null checks should be added to ensure that DOM manipulations are only attempted when the element is properly loaded or exists in the document.

Environment

• Device: laptop
• OS:Windows 112
• Browser: Chrome
• Version: 117
• Other info: 1920x1080

Additional context

These null checks are crucial when manipulating DOM elements that may not yet exist at the time of execution, especially when dealing with asynchronous content loading or user-triggered dynamic changes in the DOM.

Resolution

• I would be interested in resolving this bug.

[possumbilities]

@shivam8112005 can you please provide specific examples for where these issues are occuring?

[shivam8112005]

for example when we are accessing dom elements if by any reason they return null for that if we add "if"conditions to checking that particular element is null or not. this code is in src/assets/js/script.js
this thing is also in vocabulary.js

1  document.addEventListener("DOMContentLoaded", function (e) {
2      const searchForm = document.getElementById("searchForm");
3  
4      searchForm.addEventListener("submit", (e) => {
5          e.preventDefault();
6  
7          // capture and process the submission
8          console.log("captured cleanly!");
9  
10         let form = {};
11         form.query = document.getElementById("query").value;
12         form.commercial = document.getElementById("commercial").checked;
13         form.modify = document.getElementById("modify").checked;
14         selectedEngine = document.querySelector(
15             'input[name="search-engine"]:checked',
16         );
17         form.searchEngine = selectedEngine.value;
18         form.searchEngineURL = selectedEngine.dataset.url;
19  
20         // build URL & navigate to link
21         let link = buildURL(form);
22         navigateTo(link);
23     });
24

[HelcioAnicio]

All the elements are already in the HTML. I’m trying to use them according to the JavaScript code. However, there’s an error in TypeScript: a possible ‘null’ element error. How can I fix this? Because the element exists. The element is there.

const button = document.querySelector(“button”)

const paragraph = document.querySelector(“#mensagen”)

button.addEventListener(‘click’, () => {
paragraph.textContent = ‘O botão foi clicado’; 
};

[shivam8112005]

All the elements are already in the HTML. I’m trying to use them according to the JavaScript code. However, there’s an error in TypeScript: a possible ‘null’ element error. How can I fix this? Because the element exists. The element is there.

const button = document.querySelector(“button”)

const paragraph = document.querySelector(“#mensagen”)

button.addEventListener(‘click’, () => {
paragraph.textContent = ‘O botão foi clicado’; 
};

I exactly dont know that if elements already exists then why you getting error, just check your querySelectors() are they having correct id or tag. and apart from that to avoid null element error I raised this issue to add null checks before accessing any elements.