尝试动态地将 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 1class 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”属性具有相同的大小写。无需花时间查看至少应该解决当前问题的其余代码。

在您查看此内容时，考虑一下您的可变大写约定不会有什么坏处。您不必立即重命名所有变量，但您可能会发现定义个人标准将使未来的代码更易于维护。如果您与其他开发人员一起工作，那么这是您应该一起进行的练习，否则您可能会发现自己无意中互相对抗。如果您已经有命名约定，请随意忽略此建议 - 也许它会帮助其他人稍后查看此答案。