尝试动态地将 setAttribute 设置为类中的按钮元素但返回“未定义”

Question

我有这个问题。我正在用 Javascript 创建一个类似于雷区的游戏——我决定使用一个类来生成游戏关卡。该类还负责根据创建关卡时定义的关卡大小生成 DOM 代码，包括按钮和布局。

现在我遇到的问题是，当我为每个按钮生成代码时：

box.setAttribute('onclick', this.levelName + '.checkResult(this.id)');

在生成 HTML 中，它似乎是正确的：

<button id="00" class="box" onclick="LevelOne.checkResult(this.id)">test</button>

但是当我按下相对按钮时，我收到了这条消息：

Uncaught ReferenceError: LevelOne is not defined

    at HTMLButtonElement.onclick (findTheSpot.html:16)

如果我这样做，直接在第二个参数中插入变量名：

box.setAttribute('onclick', 'levelOne.checkResult(this.id)');

它完美地工作。

我将在下面粘贴整个代码，以帮助您可视化整个流程 - 我对 javascript 完全陌生，我正在尝试尽可能多地学习，我自己创建不同的编码练习，提前为任何人道歉编码恐怖或菜鸟错误：D

/// creating a class to generate an array map of 0s and a single random 1

class Level {

    constructor(wL, hL) {

    

        this.widhtLevel = wL;

        this.lenghtLevel = hL;

        this.levelName;

        

        this.level = [];

    }

    

    populateLevel() {

        

        var idNumber = 0;

       

        //Creating the main div container

        var div = document.createElement('div');

        div.style.width = this.widhtLevel + (this.widhtLevel * 50)  + 'px';

        div.style.height = this.lenghtLevel + (this.lenghtLevel * 50)  + 'px';

        div.setAttribute('id', 'mainContainer');

        div.setAttribute('class', 'boxContainer');

        document.body.appendChild(div);

        

        for(var i = 0; i < this.lenghtLevel; i++) {

            var arrayPopulation = []    

            for(var j = 0; j < this.widhtLevel; j++) {

                    arrayPopulation.push(0)

                    

                    //Creating the boxes

                    var box = document.createElement('button');

                    box.textContent = "test";

                    box.setAttribute('id', idNumber + '' + (arrayPopulation.length - 1));

                    box.setAttribute('class', 'box');

                    box.setAttribute('onclick',  this.levelName  + '.checkResult(this.id)');

                    div.appendChild(box);

            } 

      

Answer 1

问题归结为一个常见的编程噩梦——大写。尝试调试由大小写不一致引起的问题可能会非常令人沮丧，因为您的大脑在比较变量名称时经常会跳过该细节。在您的情况下，您生成的代码大写“LevelOne”，但您的硬编码值为“levelOne”。您可能必须将前一句阅读两次才能注意到差异，即使它已被明确指出。因此，您的问题的短期答案是您需要确保变量名称和“levelName”属性具有相同的大小写。无需花时间查看至少应该解决当前问题的其余代码。在您查看此内容时，考虑一下您的可变大写约定不会有什么坏处。您不必立即重命名所有变量，但您可能会发现定义个人标准将使未来的代码更易于维护。如果您与其他开发人员一起工作，那么这是您应该一起进行的练习，否则您可能会发现自己无意中互相对抗。如果您已经有命名约定，请随意忽略此建议 - 也许它会帮助其他人稍后查看此答案。