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

Posted 2023-05-07

【中文标题】JavaScript 类 构造函数 用作附加到 HTML 文件的变量

【英文标题】：JavaScript classes Constructors To use as variables to append to the HTML file

【发布时间】：2021-11-01 05:32:34

【问题描述】：

我有一个自己编写的 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 卡住了，所以我对复杂的答案没有问题

【参考方案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>

【讨论】：

是的，我在代码上方有 elementsContainer

const elementsContainer = document.getElementById("container");

谢谢它现在正在工作，我知道如何在 python 中做到这一点，但我真的被 JavaScript 卡住了

@AbdulrahmanAzmy 你能接受它作为答案吗？