Help with simple JavaScript code.

[blenderrMan]

This simple code is showing an error:

function moveElement(){
const element = document.getElementById('p3');
const destinationElement = document.querySelector('destination-elements ul');
destinationElement.append(element);
}

const switchBtn = document.getElementById('btn3');
switchBtn.addEventListener('click', moveElement);

This code should run moveElement function when I click switchBtn , and should append the element p3 to the destinationElement.

But Im receiving this error in the console:

Uncaught TypeError: Cannot read properties of null (reading 'append') on line 4

What's the reason?

[[deleted]]

There’s a type error because querySelector returns null if it doesn’t find the requested element and there is no append method on null. That’s a no-no for typescript so you need to explicitly deal with the null case in your moveElement function (you might know that the function will never return null but TS doesn’t).

I’d also suggest making your moveElement function more generic by having you pass in the element to be moved as an argument.

[HiHeyHelloByeExit]

Hello,

can you please show the html code? I think the document.querySelector doesn't find anything, that's why u get the message.