我转到了 javascript 学习班，下面的代码似乎不起作用

Question

I moved from functions to javascript classes. And my first example I tried, doesn't seem to work and I can't find why? Here I expect output to be num1 + num2 as a string whenever I click the "Click" button.

 class Sum{ constructor(num1, num2){ this.num1 = num1; this.num2 = num2; } add(){ this.result = "num1 + num2"; } displayResult(){ document.getElementById("demo").innerText = this.result; } } const s = new Sum("a", "b"); document.getElementById("button").addEventListener("click", () => { s.add(); s.displayResult(); });

 <button id="button">Click</button> <p id="demo"></p>

Answer 1

So a couple of things went wrong here:

1. Don't use the literal string "this.num1 + this.num2" but use the expression that take the variables and sum them together this.num1 + this.num2 .
2. You used event listener on element that is not appeared on the screen, so how can you click it? You probably meant to use the click event on the id button and not the demo .
3. As a rule of thumb, I don't think it's good to involve UI logic with your classes logic. For future use, it usually better to keep them separated.

Good Luck

 class Sum { constructor(num1, num2) { this.num1 = num1; this.num2 = num2; } add() { this.result = this.num1 + this.num2; } } const s = new Sum(6, 7); document.getElementById("button").addEventListener("click", () => { s.add(); displayResult(s.result); }); function displayResult(result) { document.getElementById("demo").innerText = result; }

 <button id="button">Click</button> <p id="demo"></p>

Answer 2

You don't nee the quotes in the add function and you are missing. this before the nums

this.result = this.num1 + this.num2

But as you are passing in strings to the constructor it will just concatenated the values so the output will be ”ab”

If those were supposed to be variables it should be:

var a = 5;
var b = 7;

const s = new Sum(a, b);

Answer 3

Here your code:

 class Sum { constructor(num1, num2) { this.num1 = num1; this.num2 = num2; } add() { this.result = this.num1 + this.num2; } displayResult() { document.getElementById("demo").innerText = this.result; } } const s = new Sum("a", "b"); document.getElementById("button").addEventListener("click", () => { s.add(); s.displayResult(); });

 <button id="button">Click</button> <p id="demo"></p>