why is javascript script not working in html code

Question

im making a website and im trying to put some javascript but it gives me an error can anyone tell me why?

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/main.css">
    
</head>
<body>

    <div class="overlay" id="overlay">
        <h3>Searching now...</h3>
    </div>

    <div class="hero-bg">

        <section class="top">
            <header>
                <a href="index.html">MyWebsite</a>
            </header>

            <h1><span>This is</span> My Website.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa ea vel eius voluptas perspiciatis accusantium ut sed veritatis et porro.</p>

            <div class="form-container">
                <form action="">

                    <div class="form-left">
                        <label for="city">Enter your city: </label>
                        <input type="text" name="city" id="city">
                        <p>Example: New York city</p>
                    </div>

                    <input type="button" value="Enter" id="cta-btn">
                </form>
            </div>
        </section>
    </div>

    <section class="lorem">
        <div class="right-col">
            <h2>Lorem, ipsum.</h2>

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid dolorem in animi. Fugit ab iusto commodi corporis voluptatum enim, illum nostrum beatae facilis voluptates et facere ipsum inventore nemo repellat rerum itaque obcaecati magni fugiat molestiae? Illo, quod neque cum nam porro necessitatibus qui iure vel nesciunt a veritatis placeat magnam exercitationem veniam, nemo adipisci est quaerat. Placeat repellendus aperiam consectetur voluptas saepe quae, fugiat dolores tempora nobis, maxime corporis nulla non, suscipit voluptate! Cumque.</p>
        </div>

        <img src="images/mtn_bg.jpg" alt="Image of yoda">
    </section>

    <script>
        let btn = document.getElementById('ctn-btn')
        let overlay = document.getElementById('overlay')

        btn.addEventListener('click' () = {  /*this is not working*/
            overlay.style.display = 'grid' 
        })
    </script>
    
</body>
</html>

error


        let btn = document.getElementById('ctn-btn')
        let overlay = document.getElementById('overlay')

        btn.addEventListener('click' () = {  /*this is not working*/
            overlay.style.display = 'grid' 
        })

in the video it was also ('click' () => { but that gave me an error so i deleted the > this is my first time trying javascript in a website

it gives me an error under the . in overlay.style did i forget to add something in the head tag?

anyone know the problem?

Obed Amoasi · Accepted Answer · 2022-02-13 06:23:57Z

2

You are missing a comma after your "click"

the code should be.

let btn = document.getElementById("ctn-btn");
let overlay = document.getElementById("overlay");

btn.addEventListener("click", () => {
  overlay.style.display = "grid";
});

As you are starting out now, remember every code, need to be of a specific structure (syntax), if you change the structure, it may not work as expected. For now, try to learn the syntax as much as possible, whiles learning the logic behind the code that you write.

edited Feb 13, 2022 at 6:23

answered Feb 13, 2022 at 6:05

Obed Amoasi

2,0491 gold badge21 silver badges28 bronze badges

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

2 Comments

yoda Over a year ago

oh thank you so much, it works now

StackOverflowUser Over a year ago

The comma is needed because "click" and () => { ... etc. ... } are two parameters being passed to addEventListener()

Shahid · Accepted Answer · 2022-02-13 06:10:36Z

1

You missed a comma after 'click'. code -

btn.addEventListener('click', () => {
    overlay.style.display = 'grid';
});

answered Feb 13, 2022 at 6:10

Shahid

13010 bronze badges

Comments

Minhaz · Accepted Answer · 2022-02-13 06:10:42Z

0

You have to use => otherwise it will give you a syntax error. I think the comma occurring the problem. After passing the event type you have to use a comma ("click",) then you can pass an arrow ()=>{} or simple function function(){} with it. So, when the button is clicked the function will be triggered.

I hope, this will help you.

answered Feb 13, 2022 at 6:10

Minhaz

1972 silver badges14 bronze badges

Collectives™ on Stack Overflow

why is javascript script not working in html code

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related