为什么javascript脚本在html代码中不起作用答案

【问题标题】：why is javascript script not working in html code为什么javascript脚本在html代码中不起作用
【发布时间】：2022-02-13 16:21:16
【问题描述】：

我正在制作一个网站，我试图放一些 javascript，但它给了我一个错误，谁能告诉我为什么？

HTML 代码

<!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>

错误


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

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

在视频中也是 ('click' () => { 但这给了我一个错误，所以我删除了 > 这是我第一次在网站上尝试 javascript

它在 .在overlay.style中我忘记在head标签中添加一些东西了吗？

有人知道这个问题吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

"click" 后面少了一个逗号

代码应该是。

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

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

当您现在开始时，请记住每个代码，都需要具有特定的结构（语法），如果您更改结构，它可能无法按预期工作。现在，尝试尽可能多地学习语法，同时学习您编写的代码背后的逻辑。

【讨论】：

哦，非常感谢，现在可以使用了
需要逗号，因为“click”和 () => { ... etc. ... } 是传递给 addEventListener() 的两个参数

【解决方案2】：

您在“点击”后遗漏了一个逗号。代码 -

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

【讨论】：

【解决方案3】：

你必须使用=> 否则它会给你一个语法错误。我认为逗号出现了问题。传递事件类型后，您必须使用逗号 ("click",)，然后您可以传递箭头 ()=>{} 或简单的函数 function(){}。所以，当按钮被点击时，函数就会被触发。

希望对你有帮助。

【讨论】：