Cannot add or subtract to a class value in javascript

BartTheBart

I'm a beginner in javascript but I'm proficient in java. My problem is that I created a class called Trapezium that contains 2 buttons and a value. The goal is for one button to subtract 1 from the value and the other to add 1 to the value. The value after the click should be displayed in the console.

However, when I click either button "NaN" gets displayed in the console. I have no idea why it thinks that my value is not a number. I tried to parseInt the value and that didn't work either. Can someone please explain to me what I am doing wrong?

Here is my code:

class Trapezium {

constructor(element){
    this.element = element;

    this.decrement = document.createElement("BUTTON");
    this.decrement.className = "decrement";
    this.decrement.innerHTML = "-";
    this.element.appendChild(this.decrement);

    var num = 0;
   
    this.increment = document.createElement("BUTTON");
    this.increment.className = "increment";
    this.increment.innerHTML = "+";
    this.element.appendChild(this.increment);

    this.increment.addEventListener("click", this.add);
    this.decrement.addEventListener("click", this.subtract);

}

add()
{
    this.num += 1;
    console.log(this.num);
}

subtract()
{
    this.num -= 1;
    console.log(this.num);
}

}

Sempervivum

I made your code working:

    <div id="test-trapezium">

    </div>
    <script>
        class Trapezium {

            constructor(element) {
                this.element = element;

                this.decrement = document.createElement("BUTTON");
                this.decrement.className = "decrement";
                this.decrement.innerHTML = "-";
                this.element.appendChild(this.decrement);

                this.num = 0;

                this.increment = document.createElement("BUTTON");
                this.increment.className = "increment";
                this.increment.innerHTML = "+";
                this.element.appendChild(this.increment);

                this.increment.addEventListener("click", this.add);
                this.decrement.addEventListener("click", this.subtract);
            }
            add = () => {
                this.num += 1;
                console.log(this.num);
            }

            subtract = () => {
                this.num -= 1;
                console.log(this.num);
            }

        }
        const theTrapezium = new Trapezium(document.getElementById('test-trapezium'));
    </script>

There were two issues:

You have to define the variable num by this.num = 0;, otherwise it's just a local variable instead of a member of the object.

The keyword function was missing, should read:

function add()
{
    this.num += 1;
    console.log(this.num);
}

However I used the new arrow function in order to make this available inside:

           add = () => {
                this.num += 1;
                console.log(this.num);
            }

BTW: You better use code tags when posting code: [code]your code here[/code] or enclose the code in triple backtics.

BartTheBart

Sempervivum
You are a lifesaver. Thank you so much! I understand what I was doing wrong now thanks to you.
I searched the internet for hours trying to fix myself without any progress.
Thank you for the help, it really means a lot to me. My bad I will use the code tags next time, I'm new here.

marksmith121

Good answer and thanks for sharing