javascript createElement via appendChild returning error

Question

I'm trying to write a short javascript function to add buttons for prev/next to a css-slider I've put together.
I don't have access to the DOM, so figured I'd just insert the div's via javascript. Here is the function:

function createfn(){
  var element = document.createElement("div");
  var prev = document.createTextNode("<");
  element.appendChild(prev);
  document.getElementsByClassName("sqs-gallery")[0].appendChild(element);
}
window.onload=createfn();

I am getting an error:

"Cannot read property 'appendChild' of undefined"

The div container with class .sqs-gallery is definitely appearing on the page. I was questioning whether this was somehow running before the DOM fully loaded, but I have the window.onload in there which (I believe) should wait until everything is loaded before running the function.

Any and all thoughts and help is greatly appreciated!

As you've described the situation, it should work. Try adding a minimal reproducing example to your question. — junvar
– junvar, Commented Aug 14, 2019 at 19:32
* What is the full error returned in console? * Have you tried to console.log your variables and what's the results? — Chris Chen
– Chris Chen, Commented Aug 14, 2019 at 19:40

Alex Vovchuk · Accepted Answer · 2019-08-14 19:37:59Z

5

You perform window.onload=createfn();

it means that you assign result of createfn() to onload (not the function). And function "createfn" being executed immediately (does not wait for window loading).

Just remove parentheses to assign handler instead of function value.

answered Aug 14, 2019 at 19:37

Alex Vovchuk

2,9664 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jmarx34 Over a year ago

That did the trick! Figured it was a stupid mistake like that! Thanks for the quick responses.

Spearmint · Accepted Answer · 2019-08-15 10:20:42Z

1

If you leave the code as window.onload=createfn() (with the parenteheses) createfn will run directly as the code starts to run (even before the DOM has loaded) because the result needs to be assigned to window.onload.

What you instead should be trying to do is assign the function, not the result: window.onload=createfn. This should work just fine.

edited Aug 15, 2019 at 10:20

answered Aug 14, 2019 at 19:45

Spearmint

871 gold badge1 silver badge11 bronze badges

Collectives™ on Stack Overflow

javascript createElement via appendChild returning error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related