#Hi guys I am trying to build a Javascript, HTML and CSS website but im running into a problem...

81 messages ¡ Page 1 of 1 (latest)

cerulean zephyrBOT
#

@hazy lichen

File Attachments Not Allowed

For safety reasons we do not allow files with certain file extensions.

dhiroxy Said

So I am trying to make a login/signup page with a sliding transition but the transition is working and I dont know why. The error im getting in the console is:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Can anyone please help?

Code Formatting

You can share your code using triple backticks like this:
```
YOUR CODE
```

Large Portions of Code

For longer scripts use Hastebin or GitHub Gists and share the link here

Ignored these files due to them having disallowed file extensions
  • LoginSignup.html
  • LoginSignup.css
hazy lichen
#

JS CODE:

        const signUpButton = document.getElementById('signUp');
        const signInButton = document.getElementById('signIn');
        const main = document.getElementById('main');   


        signUpButton.addEventListener("DOMContentLoaded", 'click', () => {
            main.classList.add("right-panel-active");
        });

            signInButton.addEventListener("DOMContentLoaded", 'click', () => {
            main.classList.remove("right-panel-active");   
        });

    </script>
magic holly
#

Probably because your code isn't actually running in the onload handler?

#

The body might not be fully loaded at the time when your JS runs

hazy lichen
#

oh yh no the onoad part was just me trying stuff on stack overflow

#

but like it still didnt work

gaunt dome
#

Does it give you any errors???

hazy lichen
gaunt dome
#

Move your script tag to just before your </body> closing tag

#

Also make sure the id of the element tag exactly matches the id in your code

hazy lichen
#

oke

hazy lichen
hazy lichen
#

so idek whats going on

gaunt dome
#

Can you send your HTML

hazy lichen
gaunt dome
#

Send it here

cerulean zephyrBOT
#

@hazy lichen

File Attachments Not Allowed

For safety reasons we do not allow files with certain file extensions.

Code Formatting

You can share your code using triple backticks like this:
```
YOUR CODE
```

Large Portions of Code

For longer scripts use Hastebin or GitHub Gists and share the link here

Ignored these files due to them having disallowed file extensions
  • LoginSignup.html
hazy lichen
gaunt dome
#

Read what the bot is telling you

magic holly
#

It's a timing issue like I said

hazy lichen
#

how do i fix it

gaunt dome
#

Most likely a typo

hazy lichen
#

mayb

gaunt dome
#

Need to see more code to know

magic holly
hazy lichen
#

one sec lemme github

magic holly
#

The onload idea was right, just not executed correctly

gaunt dome
#

Seeing the full code would let us give a proper answer without speculating

magic holly
#

Nah even if you don't have any other JS you're not guaranteed to have your JS run after the body is done

gaunt dome
#

If the script is at the end you do

magic holly
#

(even if it's the last element in the body)

gaunt dome
#

What in the body can delay like that???

magic holly
#

A tiny delay is enough, could be anything really

#

CSS or whatever?

#

Browsers are hella weird

gaunt dome
#

Regardless getting the full code would let us give an actual answer without speculation

#

Css wouldn’t effect a button id lookup

magic holly
#

Loading the CSS could delay building the DOM

#

TLDR just run code after the body has loaded kek

hazy lichen
gaunt dome
#

Nope. HTML renders then css is applied which is why on slow connections you’ll see an unstyled page until the css loads in

#

Your buttons don’t have ids set

hazy lichen
#

they have classes

#

*wait

gaunt dome
#

They need ids

#

And they don’t even have classes set

hazy lichen
#

i changed it from class to id

#

and yh this happens

image.png
gaunt dome
#

The id on the html element needs to exactly match be id passed to getElementById

#

In js you’re using signUp in HTML you’re using SignUp

#

That doesn’t match

hazy lichen
#

oh yh mb

#

now its correct right

image.png
#

im getting this

image.png
gaunt dome
#

Remove the “DOMContentLoaded” bits

#

Should look like addEventListener(“click”, () =>

#

With the rest of your arrow functions of course

hazy lichen
#

Okay so uhm mb gang

#

It workd 😄

#

Ty

gaunt dome
#

Awesome!

hazy lichen
#

now

#

what does ```Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".

gaunt dome
#

It means it needs to start with /, ./ or ../

#

It thinks you’re trying to load a JavaScript module that’s located on your web site

hazy lichen
gaunt dome
#

No idea. Can't see your code and have no idea where you got the code from to begin with

hazy lichen
hazy lichen
# 
import { initializeApp } from "firebase/app";
        import { getDatabase, ref, set, get, child } from "firebase/database";

        // Your web app's Firebase configuration
        const firebaseConfig = {
          config stuff
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.database();

        document.getElementById('signupbutton').addEventListener('click', function(e) {
            db.ref('user/' + document.getElementById('name').value).set({
            username: document.getElementById("name").value,
            email: document.getElementById("email").value
            });
            alert("LOGIN SUCCESSFUL!")
gaunt dome
#

What told you to add that line importing from firebase?

hazy lichen
#

Like the firebase website

gaunt dome
#

Can you share the link

hazy lichen
gaunt dome