Why does this function work without an argument but not with one

Question

I'm trying to remove buttons from the screen. This code, based on code from question 3955229 works fine, but only for buttons at an HTML element with id "hits":

function expungeButt(){ 
    //Expunge buttons from the screen
    const hitNode = document.getElementById("hits");
    while(hitNode.firstChild){
        hitNode.removeChild(hitNode.lastChild);
    };
};

I want to generalise my function to work with any HTML element with an id and the possibility of buttons as children:

function expungeButt(HTMLelementID){    
    //Expunge buttons from the screen
    const hitNode = document.getElementById(HTMLelementID);
    while(hitNode.firstChild){
        hitNode.removeChild(hitNode.lastChild);
    };
};

This throws an error in the console.log: "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'firstChild')" I assumed the while(hitNode.firstChild){... bit would be false so if there are no buttons attached to my element, nothing happens. But apparently not. Please, can anyone tell me what is happening here and suggest an alternative way to sack my buttons?

LATER:

Thank you for the suggestions. I tried them, without success so I went away for a hard think about what I'm trying to do and what I'm actually doing.

I have a Firebase-hosted page that uses a many-layered tree structure to drill down through a Firestore database. To improve this, I've made a second, sandbox page to play with Algolia. From this page, the user either finds helpful content immediately or I attempt to inject them back into the tree search page, hopefully closer to useful information than by the old way.

My function helps manage the results of an Algolia instantsearch. Algolia returns an array of hits that match a search string typed in by the user. Each extra letter typed by the user generates a new array of hits, usually a slight refinement of the previous set. I turn these hits into buttons that enable the user to access the information they need but if I don't get rid of the old set of buttons each time, the screen rapidly becomes cluttered with repeated buttons. This call clears those buttons off the screen:

const makeHits = instantsearch.connectors.connectHits(

  function renderHits({ hits }, isFirstRendering) {
    console.log('firstHits from renderHits is: ',firstHits);
    container: "#hits";
    expungeButt(hits);
    //console.log('Should have now run eB');
    
    //Empty myHits, then copy Algolia hits to myHits
    myHits = [];
    myHits = hits;  
    
    myHits.forEach(hit => {...//Make buttons or pop up data here

In this call, expungeButt() works, no argumant needed.

However, if the user clicks a button that has no data to put onto the screen straight away, they jump into the tree search. This returns more buttons from a different javascript file. Possibly, the drill down data is being sent to my original page, not my Algolia sandbox. I tried adding an element to my sandbox page with the same id as the element the buttons are written to on the tree search page but I've just realised that's illegal, ids must be unique.

Things I could try:

Graft my sandbox and original page together so I only have 1 html page.
Add an argument to the drilldown function to tell it where to send its results, make the results location a variable.
Change my problematic function name to something less purile. This wouldn't improve my code but I'd feel less of a twit.

All further suggestions gratefully received.

The error tells you that `hitNode` itself is null. It doesn't have anything to do with its children. This would be the case if you pass an ID into the function that doesn't exist. — CherryDT, Aug 15 '22 at 12:07
`while(hitNode?.firstChild)` will clear that error up right away :p — Jaromanda X, Aug 15 '22 at 12:10
Are you actually passing an argument when you call your function? — phuzi, Aug 15 '22 at 12:13

score 1 · Answer 1 · answered Aug 15 '22 at 12:10

I assumed the while(hitNode.firstChild){... bit would be false

Not if getElementById doesn't find anything. Then hitNode is null, so hitNode.firstChild throws an error, so the while condition is never even evaluated because of that error.

You can use optional chaining to make the whole expression evaluate to null if hitNode is null:

while(hitNode?.firstChild){

Since null is falsy then the loop simply won't iterate, but no error would be thrown.

Why does this function work without an argument but not with one

1 Answers1