why is javascript script not working in html code-CodePudding

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  id="overlay">
        <h3>Searching now...</h3>
    </div>

    <div >

        <section >
            <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 >
                <form action="">

                    <div >
                        <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 >
        <div >
            <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?

CodePudding user response：

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.

CodePudding user response：

You forgot a > for arrow function syntax:

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

CodePudding user response：

You missed a comma after 'click'. code -

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

CodePudding user response：

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.