OOP“类”和使用 JavaScript 进行 DOM 操作，未定义元素

Question

这是我的第一个使用 JavaScript 使网站动态化的个人项目。我并不感到完全迷失，但几天后我就会屈服于被“卡住”的感觉。我有一个包含 6 个项目的网格容器，我想在其上附加“单击”

eventListener

。本质上，我使用类和构造函数来组织我的代码，我的问题可能在于对如何正确编写代码不够熟悉。

// these are the `grid items`
function mapContainers() {
    let values = ["1", "2", "3", "4", "5", "6"];
    let gridItems = values.map((element) => {
        return document.querySelector(`.item${element}`);
    });
    return gridItems;
}

// this is my GridButton Class
class GridButton {
    constructor(button, direction) {
        this.button = button;
        this.direction = direction;
    }

    // Getter
    get whenClicked() {
        return this.button.addEventListener("click", popUp(`${this.direction}`));
    }
    // Method
    popUp(direction) {
        gridContainer.style.zIndex = "-1";
        gridContainer.style.opacity = "0.2";
        dogBone.style.display = "block";
        dogBone.animate(
            {
                transform: "scale(0, 0)",
                transformOrigin: `${this.direction}`
            },
            {
                transform: "scale(1, 1)"
            },
            {
                duration: 400,
                iterations: 1
            }
        );
    }
}

// this is my init()
function init() {
    // Call functions here
    const gridItems = mapContainers();
    const dogWalking = new GridButton(gridItems[0], "top left");
    const dayCare = new GridButton(gridItems[1], "top right");
    const boarding = new GridButton(gridItems[2], "left");
    const bath = new GridButton(gridItems[3], "right");
    const parties = new GridButton(gridItems[4], "bottom left");
    const petWasteRemoval = new GridButton(gridItems[2], "left");
    dogWalking.whenClicked();
    dayCare.whenClicked();
    boarding.whenClicked();
    bath.whenClicked();
    parties.whenClicked();
    petWasteRemoval.whenClicked();
}

// variously defined variables:
const gridContainer = document.querySelector("services_grid_container");
const serviceElaboration = document.querySelector("service_elaboration");
const serviceElaborationText = document.querySelector("service_elaboration_text");
const dogBone = document.querySelector("dog-bone");
const dogBoneText = document.querySelector("dog-bonetext");

// running the init()
document.addEventListener('DOMContentLoaded', init);

由于某种原因，控制台记录错误：

script.js:19 Uncaught ReferenceError: popUp is not defined
    at get whenClicked [as whenClicked] (script.js:19:28)
    at HTMLDocument.init (script.js:51:16)
get whenClicked @ script.js:19
init @ script.js:51

我不知道为什么它说

popUp

未定义。我并不是要晾晒我的脏衣服，我只是想了解一下！与此同时，我会继续努力理解这一点，但感谢任何考虑提供帮助的人。

我尝试咨询 Chat GPT，但这并没有解决问题。 Chat GPT 建议将

eventListener

添加到构造函数中，但除了产生相同错误的代码之外，我无法弄清楚这一点。我考虑过将

popUp

集成到构造函数中，但这似乎是一个死胡同。最后我利用了堆栈溢出。

Answer 1

• 未找到 popup 方法，因为您没有使用

  this

  ，并且您丢失了类实例的范围，您可以使用箭头函数修复它。
• 您不需要将方向传递给弹出方法，因为我们位于类实例内部，并且方向是一个属性。
• 您必须问自己是否所有弹出窗口代码都必须位于每个类实例中，因为弹出窗口实际上并不是网格项的一部分。在 OOP 类中使用全局变量（容器和狗骨头）也不常见。

    // these are the `grid items`
    function mapContainers() {
      let values = ["1", "2", "3", "4", "5", "6"];
      let gridItems = values.map((element) => {
        return document.querySelector(`.item${element}`);
      });
      return gridItems;
    }
    
    // this is my GridButton Class
    class GridButton {
      constructor(button, direction) {
        this.button = button;
        this.direction = direction;
        this.button.addEventListener("click", () => this.popUp());
      }
    
      popUp() {
        console.log(`popup code for direction: ${this.direction}`)
    
        gridContainer.style.zIndex = "-1";
        gridContainer.style.opacity = "0.2";
        dogBone.style.display = "block";
        dogBone.animate({
          transform: "scale(0, 0)",
          transformOrigin: this.direction
        }, {
          transform: "scale(1, 1)"
        }, {
          duration: 400,
          iterations: 1
        });
      }
    }
    
    // create grid items
    function init() {
      const gridItems = mapContainers();
      const dogWalking = new GridButton(gridItems[0], "top left");
      const dayCare = new GridButton(gridItems[1], "top right");
      const boarding = new GridButton(gridItems[2], "left");
      const bath = new GridButton(gridItems[3], "right");
      const parties = new GridButton(gridItems[4], "bottom left");
      const petWasteRemoval = new GridButton(gridItems[5], "left");
    }
    
    const gridContainer = document.querySelector(".services_grid_container");
    const dogBone = document.querySelector(".dog-bone");
    init();