I have a little JS problem – cannot change textContent of an HTML element when using it as class field.
In this chunk of program, I want to increment or decrement number of rows and cols. For this I’ve set up a class named Setting with input fields of initial value, increment button element, decrement button element, and an element which shows the value.
Increment and decrement operations work perfectly fine when looking at the console data only. But the element which shows the value on the page just does not work.

HTML code:

            <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>

JS code:

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();

However, if I change the reference to the displayed text from this.displayText directly to document.querySelector("#rows-show-num").textContent, the text updates perfectly fine:

    increment() {
        this.number++;
        console.log("This number incremented to: ", this.number);
        console.log("This display value before changing: ", this.displayText)
        document.querySelector("#rows-show-num").textContent = this.number;
        console.log("This display value after changing: ", this.displayText)

But, this is not what I want. Pretty sure there must be a way to make it work within a class, I just don’t know how…

>Solution :

The issue with your code could be that when you pass the textContent property of the display element to the Setting constructor, you are only passing its initial value as a string. When you update this.displayText in the increment and decrement methods, you are only updating the string value, not the textContent of the actual display element.

You can maybe store a reference to the display element itself in the Setting instance, instead of just its textContent. Try if this works

class Setting {
    constructor(number, buttonLess, buttonMore, displayElement) {
      this.number = number;
      this.buttonLess = buttonLess;
      this.buttonMore = buttonMore;
      this.displayElement = displayElement;
      this.displayText = this.displayElement.textContent;
    }
    increment() {
        this.number++;
        console.log("This number incremented to: ", this.number);
        console.log("This display value before changing: ", this.displayText)
        this.displayText = this.number;
        this.displayElement.textContent = this.displayText;
        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;
        this.displayElement.textContent = this.displayText;
        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"));
const colsSetting = new Setting(10, document.querySelector("#cols-decrement"), document.querySelector("#cols-increment"), document.querySelector("#cols-show-num"));
rowsSetting.makeWork();
colsSetting.makeWork();