JavaScript 类 构造函数 用作附加到 HTML 文件的变量

Question

我有一个自己编写的 HTML 模板； 这是：

<div class="secret">
            <p class="title secret-title">built in HTML</p>
            <div class="secret-message locked">
                <p class="text-inside">locked</p>
            </div>
            <button class="hack">hack</button>
        </div>

我想使用带有 javaScript 的 innerHTML 属性的 JavaScript 将此模板添加到我的 index.html 页面，但问题是； 我想在渲染它之前在 javaScript 中编辑这个 HTML 模板，我写的代码在这里：

class Secret {
    constructor(title, typeOfSecret) {
        this.title = title
        this.typeOfSecret = typeOfSecret
    }

    secret = `<div class="secret">
            <p class="title secret-title">${this.title}</p>
            <div class="secret-message ${this.typeOfSecret}">
                <p class="text-inside black">${this.typeOfSecret}</p>
            </div>
            <button class="hack">hack</button>
        </div>`
    

    append() {
        //console.log(this.secret)
        console.log(this.secret)
        elementsContainer.innerHTML += this.secret
    }

}

问题是它在我使用 ${this.typeOfSecret} 和 {this.name} 的地方返回 UnDefined，如下所示： the undefined picture

那么如何添加这个让用户能够将自己的数据添加到网站上呢？

注意：我知道这些东西，因为我是一个 python 人，但我被 JavaScript 卡住了，所以我对复杂的答案没有问题

Answer 1

你定义“秘密”的方式使它成为一个类变量，类似于 Python 中的这个

class Secret:

    secret = f"{self.type_of_secret}"

    def __init__(self, type_of_secret):
        self.type_of_secret = type_of_secret

当你去访问secret时，它就无法访问self

如果你真的想在不调用方法的情况下访问它，可以考虑使用getter，这类似于python中的@property。见下文。

class Secret {
    constructor(title, typeOfSecret) {
        this.title = title
        this.typeOfSecret = typeOfSecret
    }

    get secret() {
      return `<div class="secret">
            <p class="title secret-title">${this.title}</p>
            <div class="secret-message ${this.typeOfSecret}">
                <p class="text-inside black">${this.typeOfSecret}</p>
            </div>
            <button class="hack">hack</button>
        </div>`
    }

    appendTo(elementsContainer) {
        // In your example, it didn't have elementsContainer defined, I assume you have it in a higher scope?
        console.log(this.secret);
        elementsContainer.innerHTML += this.secret
    }

}

x = new Secret("secret title", "typeofsecret"); // don't forget to `new` here
x.appendTo(document.querySelector("#x"));

<div id="x"></div>