Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot read property 'appendChild' of undefined #5

Closed
fluxmaps opened this issue Oct 27, 2020 · 3 comments
Closed

Cannot read property 'appendChild' of undefined #5

fluxmaps opened this issue Oct 27, 2020 · 3 comments

Comments

@fluxmaps
Copy link

Details
What browser were you using: Chrome - Version 86.0.4240.111 (Official Build) (64-bit)
What OS were you using: Windows 10 Pro - Version 1909OS Build 18363.1139
Project version you have: Master /build

Describe the bug

  1. Importing the /build directory files directly into html causes a TypeError: "Cannot read property 'appendChild' of undefined".
  2. Selecting a button element using the readme example causes a TypeError: "Cannot read property 'style' of null".

To Reproduce
Use the following HTML content, assuming the two build files are located relative to the HTML file in ../assets/js and assets/css.
For error 1. above, simply view the error in a browser console.
For error 2. above, click on the button and view the error in a browser console.

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<script type="text/javascript" src="../assets/js/colr_pickr.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../assets/css/colr_pickr.min.css" />
    </head>
    <body>
        <button id="test-button">Test</button>
    </body>
    <script type="text/javascript">
        const button = document.getElementById('test-button');
        let picker = new ColorPicker(button, '#ffcc99');
        button.addEventListener('colorChange', function (event) {
            const color = event.detail.color.hex;
        });
    </script>
</html>

Screenshots
Error 1
image

Error 2
image
@R-TEK
Copy link
Owner

R-TEK commented Oct 27, 2020 •
edited
Loading

Put the script tag you use the call the library below the HTML, thats proabably the problem.

I'll look in to not having to do this in future devlopments.

Thanks, TEK

@R-TEK
Copy link
Owner

R-TEK commented Oct 27, 2020

@fluxmaps

@fluxmaps
Copy link
Author

Ah beauty! Thanks for the speedy reply. The following script order now works:

<!DOCTYPE HTML>
	<head>
		<link rel="stylesheet" type="text/css" href="../assets/css/colr_pickr.min.css" />
    </head>
    <body>
        <button id="test-button">Test</button>
    </body>
</html>
<script type="text/javascript" src="../assets/js/colr_pickr.min.js"></script>
<script type="text/javascript">
    const button = document.getElementById('test-button');
    let picker = new ColorPicker(button, '#ffcc99');
    button.addEventListener('colorChange', function (event) {
        const color = event.detail.color.hexa;
    });
</script>

P.s. thanks for the awesome work, this product is fantastic.

FlorentMasson added a commit to FlorentMasson/colr_pickr that referenced this issue Jan 26, 2022
@FlorentMasson
Allow library to be inserted in HEAD tag and lazily loaded
dd83331 
R-TEK#5
@FlorentMasson FlorentMasson mentioned this issue Jan 26, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@R-TEK @fluxmaps