classname[i].length 在控制台中返回 undefined 和更多错误答案

【问题标题】：classname[i].length returns undefined in console and more errorsclassname[i].length 在控制台中返回 undefined 和更多错误
【发布时间】：2021-08-31 16:55:58
【问题描述】：

"use strict";

const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const showModal = document.querySelector(".buttons");
const xModal = document.querySelector(".close-modal");
console.log(showModal.length);

const openModal = function() {
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
  console.log("opened");
};

const closeModal = function() {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

for (let i = 0; i < showModal.length; i++)
  showModal[i].addEventListener("click", openModal);

xModal.addEventListener("click", closeModal);
overlay.addEventListener("click", closeModal);

document.addEventListener("keydown", function(e) {
  if (e.key === "Escape" && !modal.classList.contains("hidden")) {
    closeModal();
  }
});

<!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" type="text/css" href="css/styles.css " />
  <title>Modal Window</title>
</head>

<body>
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
  <button class="buttons">Button 3</button>

  <div class="modal hidden">
    <button class="close-modal">&times;</button>
    <h2>This is a Modal Window</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="overlay hidden"></div>
</body>

</html>

在上面的代码中，点击事件不起作用。在检查了几次之后，我看到了“console.log(showModal.length);”返回未定义，而不是返回一个数字，它还说变量“i”是未定义的。请帮忙。谢谢

【问题讨论】：

标签： javascript html css frontend web-development-server

【解决方案1】：

document.querySelector 返回一个与选择器匹配的 HTMLElement。你想要document.querySelectorAll，它返回一个包含与选择器匹配的所有元素的数组。

const showModal = document.querySelectorAll(".buttons");

"use strict";

const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const showModal = document.querySelectorAll(".buttons");
const xModal = document.querySelector(".close-modal");
console.log(showModal.length);

const openModal = function() {
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
  console.log("opened");
};

const closeModal = function() {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

for (let i = 0; i < showModal.length; i++)
  showModal[i].addEventListener("click", openModal);

xModal.addEventListener("click", closeModal);
overlay.addEventListener("click", closeModal);

document.addEventListener("keydown", function(e) {
  if (e.key === "Escape" && !modal.classList.contains("hidden")) {
    closeModal();
  }
});

<!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" type="text/css" href="css/styles.css " />
  <title>Modal Window</title>
</head>

<body>
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
  <button class="buttons">Button 3</button>

  <div class="modal hidden">
    <button class="close-modal">&times;</button>
    <h2>This is a Modal Window</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="overlay hidden"></div>
</body>

</html>

【讨论】：