将元素textContent作为JS类字段时无法更新页面显示的问题

问题场景 #

编写了一个用于增减行列数量的程序，创建了Setting类管理初始值、增减按钮和数值显示元素。增减操作时控制台的数据更新正常，但页面上的数值始终不变化。直接用document.querySelector修改对应元素的textContent能正常更新页面，但希望在类内部实现该功能。

原HTML代码 #

<div class="settings-outer">
    <p class="settings-inner">Number of rows:</p>
    <button class="settings-inner small" id="rows-decrement">-</button>
    <p class="settings-inner small" id="rows-show-num">33</p>
    <button class="settings-inner small" id="rows-increment">+</button>

    <p class="settings-inner">Number of cols:</p>
    <button class="settings-inner small" id="cols-decrement">-</button>
    <p class="settings-inner small" id="cols-show-num">33</p>
    <button class="settings-inner small" id="cols-increment">+</button>
</div>

原JavaScript代码 #

class Setting {
    constructor(number, buttonLess, buttonMore, displayText) {
      this.number = number;
      this.buttonLess = buttonLess;
      this.buttonMore = buttonMore;
      this.displayText = displayText;
    }
    increment() {
        this.number++;
        console.log("This number incremented to: ", this.number);
        console.log("This display value before changing: ", this.displayText)
        this.displayText = this.number;
        console.log("This display value after changing: ", this.displayText)
    }
    decrement() {
        this.number--;
        console.log("This number decremented to: ", this.number);
        console.log("This display value before changing: ", this.displayText)
        this.displayText = this.number;
        console.log("This display value after changing: ", this.displayText)
    }
    listenButtonLess() {
        this.buttonLess.addEventListener("click", () => {
            this.decrement();
        })
    }
    listenButtonMore() {
        this.buttonMore.addEventListener("click", () => {
            this.increment();
        })
    }
    makeWork() {
        this.listenButtonLess();
        this.listenButtonMore();
    }
}

const rowsSetting = new Setting(10, document.querySelector("#rows-decrement"), document.querySelector("#rows-increment"), document.querySelector("#rows-show-num").textContent);
const colsSetting = new Setting(10, document.querySelector("#cols-decrement"), document.querySelector("#cols-increment"), document.querySelector("#cols-show-num").textContent);
rowsSetting.makeWork();
colsSetting.makeWork();

原因分析 #

核心问题在于：document.querySelector("#rows-show-num").textContent返回的是字符串（值类型），将其赋值给类的displayText字段后，这个字段只是存储了字符串的副本。后续修改this.displayText = this.number时，只是修改了类内部的变量，和DOM元素本身没有任何关联，所以页面不会更新。

而直接用document.querySelector修改时，是直接操作DOM元素的textContent属性，会触发页面渲染更新。

解决方案 #

修改Setting类的设计：

• 构造函数的displayText参数接收DOM元素本身，而不是元素的textContent值
• 在increment和decrement方法中，修改this.displayElement.textContent来同步更新页面显示

修改后的完整JavaScript代码 #

class Setting {
    constructor(number, buttonLess, buttonMore, displayElement) {
      this.number = number;
      this.buttonLess = buttonLess;
      this.buttonMore = buttonMore;
      // 存储DOM元素引用，而非textContent的值
      this.displayElement = displayElement;
      // 初始化时同步页面显示与类内部数值
      this.displayElement.textContent = this.number;
    }
    increment() {
        this.number++;
        console.log("This number incremented to: ", this.number);
        // 修改DOM元素的textContent，触发页面更新
        this.displayElement.textContent = this.number;
    }
    decrement() {
        this.number--;
        console.log("This number decremented to: ", this.number);
        // 修改DOM元素的textContent，触发页面更新
        this.displayElement.textContent = this.number;
    }
    listenButtonLess() {
        this.buttonLess.addEventListener("click", () => {
            this.decrement();
        })
    }
    listenButtonMore() {
        this.buttonMore.addEventListener("click", () => {
            this.increment();
        })
    }
    makeWork() {
        this.listenButtonLess();
        this.listenButtonMore();
    }
}

// 传入DOM元素，而非textContent值
const rowsSetting = new Setting(10, document.querySelector("#rows-decrement"), document.querySelector("#rows-increment"), document.querySelector("#rows-show-num"));
const colsSetting = new Setting(10, document.querySelector("#cols-decrement"), document.querySelector("#cols-increment"), document.querySelector("#cols-show-num"));
rowsSetting.makeWork();
colsSetting.makeWork();

额外优化点 #

• 初始化时加入this.displayElement.textContent = this.number，确保页面显示和类内部的number值统一（原HTML中显示33，类初始值为10，此操作可将页面显示同步为10）
• 可根据需求移除不必要的console.log，精简代码

内容的提问来源于stack exchange，提问作者kkrzaevich