Can't create elements and append inside a function?

(I’m creating a blackjack game btw.)1)Whenever I create an element inside a function that will be executed by an eventlistener, it says what the picture says.
image

image

image


Also, When I assign a variable like this inside a function.
image
instead of this way
image

it pops up “paused in debugger”

and it locates me to this. why?

Hopefully this wall of text makes sense, because I rushed the crap out of it.

NewButton is null so NewButton.document does not exists.

To be honest I do not know what you try to achieve with this code.

Normally you create an element only with

document.createElement()

therefor I do not know why you try to call createElement on the NewButton

To find out how document.createElement() is used see:

I just want it to where when I click on the “Start game” button, the button “Draw a card” will get deleted, and a new button called “draw a card” will spawn in. that is where I’m at rn.

Should be simple to do this but it isn’t because the damn trash createElement doesn’t work inside the function, yayayay.

I appended the created element to the ContainerForButton variable(which is referencing “ForButton”) but it didn’t do anything.

image

I know how it works, but I’m wondering if you can create an element inside a function.

Yes, you can create an element inside a function.

Then what did I do wrong?

Did you intend to set a breakpoint at line 359? If you click on 359 it will probably clear the breakpoint.

After the breakpoint you have code:
ModifyButton.document.querySelector("#button");

That should be:
ModifyButton = document.querySelector("#button");

However that will give you an element object which has ID attribute of “button” (if you have an element with ID attribute of “button”).

Why do you need three buttons: TestButton, NewButton and ModifyButton?.

I don’t remember because I deleted that function, but now I know what to do.

How do you remove innertext? I want the button element to disappear so it can be replaced by a new button.

For reference
image

image

image

Am I correct in thinking that at any time your web page will never display more than one button?

There are several possible approaches, but have you considered making a button element disappear by using CSS display:none ?

2 Likes

Ty my good man.