尝试将 setAttribute 动态设置为 Class 中的按钮元素，但 returns "is not defined"

Question

我有这个问题。我正在 Javascript 中创建一个类似于雷区的游戏 - 我决定使用 Class 来生成游戏关卡。 Class 还负责根据创建关卡时定义的关卡大小生成 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);

            } 
            this.level.push(arrayPopulation);
            idNumber++;
            
            
                
            
        } 
        
    }
    
    randomizeKey() {
        
        var randomX = Math.floor(Math.random() * (this.widhtLevel - 0));
        var randomY = Math.floor(Math.random() * (this.lenghtLevel - 0));
        this.level[randomY][randomX] = 1;
        //console.log(this.level[randomY][randomX]);
        
        
    }
    
    
    createLevel(name) {
        this.levelName = name;
        this.populateLevel()
        this.randomizeKey()
        for (var i = 0; i < this.level.length; i++) {
            console.log(this.level[i])
            
        }
    }
    



var levelOne = new Level(5,5);
levelOne.createLevel("LevelOne");

Answer 1

问题归结为常见的编程噩梦 - 大写。尝试调试由大小写不一致引起的问题可能会非常令人沮丧，因为您的大脑在比较变量名称时经常会跳过该细节。在您的情况下，您生成的代码大写“LevelOne”，但您的硬编码值为“levelOne”。您可能需要阅读上一句两遍才能注意到其中的区别，即使它已被明确指出。

因此，您的问题的短期答案是您需要确保变量名称和“levelName”属性具有相同的大小写。无需花时间查看您的代码的其余部分，这些代码至少应该可以解决眼前的问题。

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

尝试将 setAttribute 动态设置为 Class 中的按钮元素，但 returns "is not defined"

Trying to setAttribute to a button Element in a Class dynamically but returns "is not defined"

javascript

dom

for-loop

button

setattribute