How to access same element in multiple javascript files

Question

I tried this:

in constant.js

const CONFIRM_BUTTON = document.querySelector(".confirm-button");
export { CONFIRM_BUTTON };

in some-file.js,

import { CONFIRM_BUTTON } from './constants';
CONFIRM_BUTTON.onclick = someFunction;

I am getting Cannot set property 'onclick' of null error in doing so.

If in some-file.js file, I do following, it works:

const CONFIRM_BUTTON = document.querySelector(".confirm-button");
CONFIRM_BUTTON.onclick = someFunction;

I am trying to do this const CONFIRM_BUTTON = document.querySelector(".confirm-button"); once and use it multiple js files? How can I do that?

Are you sure the selector is being evaluated after the DOM is ready? If the DOM is not ready when the document.querySelector(...) is evaluated, it will return null. — Terry
– Terry, Commented Mar 2, 2019 at 20:55
.confirm-button in not in the DOM on initial load, but instead of importing CONFIRM_BUTTON element, if I declare it in the same file and use it, it works. This works ` const CONFIRM_BUTTON = document.querySelector(".confirm-button"); — user7331530
– user7331530, Commented Mar 2, 2019 at 21:05

Max · Accepted Answer · 2019-03-02 20:56:37Z

1

you need just export CONFIRM_BUTTON without curved brackets

answered Mar 2, 2019 at 20:56

Max

8019 silver badges21 bronze badges

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

2 Comments

user7331530 Over a year ago

I get Declaration or statement expected error in doing so; const CONFIRM_BUTTON = document.querySelector(".confirm-button"); export CONFIRM_BUTTON;

Max Over a year ago

have you tried to use const CONFIRM_BUTTON = document.getElementsByClassName("confirm-button") ?

Collectives™ on Stack Overflow

How to access same element in multiple javascript files

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related