JavaScript 模态不起作用并显示未定义

Question

嗨，所以我陷入了我目前正在尝试构建的这个模式。基本上我有一张卡片，当您单击时应该弹出一个模式。我的 HTML 文件中有一个脚本标记。当我单击模式时，没有任何内容出现，当我检查页面时，我在控制台中看到： Uncaught ReferenceError: openPopup is not Defined 在 HTMLImageElement.onclick (modal.html:16:74) onclick @ modal.html:16

这是我第一次尝试构建模式，我认为我定义了它，但显然没有或没有在我应该定义的地方。我将在下面附上我的 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">
      <link rel="stylesheet" href="modal.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?     family=Bebas+Neue&family=Poiret+One&family=Raleway:wght@300&family=Reenie+Beanie&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="card-category omnifood">
            <img src="omnifood.jpg" alt="omnifood" onclick='openPopup()'>
            <p class="text-card"></p>
        </div>
        <div class="popup" id="popup">
            <h2>Omnifood</h2>
            <p>Omnifood is a mock delivery service I created to demonstrate web page responsiveness, CSS styling, and an introduction to basic JQuery features.</p>
            <button type="button" onclick="closePopup()>Close</button>
        </div>
    </div>
    <script>
        let popup = document.getElementById('popup');

        function openPopup(){
            popup.classList.add('open-popup');
        }
        function closePopup(){
            popup.classList.remove('open-popup');
        }
    </script>
</body>
</html>

这是我所看到的图像

Answer 1

重新创建代码时，以下内容对我有用。这可能是您在 onclick=closePopup() 之后丢失的 " 导致其余代码无法加载。

.popup {
  display: none;
}

.popup.open-popup {
  display: block;
}

<div class="container">
    <div class="card-category omnifood">
        <img src="https://unsplash.it/300/300" alt="omnifood" onclick='openPopup()'>
        <p class="text-card"></p>
    </div>
    <div class="popup" id="popup">
        <h2>Omnifood</h2>
        <p>Omnifood is a mock delivery service I created to demonstrate web page responsiveness, CSS styling, and an introduction to basic JQuery features.</p>
        <button type="button" onclick="closePopup()">Close</button>
    </div>
    <script>
      function openPopup(){
          popup.classList.add('open-popup');
      }
      function closePopup(){
          popup.classList.remove('open-popup');
      }
    </script>
</div>

JavaScript 模态不起作用并显示未定义

问题描述投票：0回答：1

1个回答

最新问题

JavaScript 模态不起作用并显示未定义

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1