时间戳

首页 > 解决方案 > 我搬到了 javascript 学习班，下面的代码似乎不起作用

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

问题描述

我从函数转移到 javascript 类。我尝试的第一个示例似乎不起作用，我找不到原因？在这里，每当我单击“单击”按钮时，我希望输出为 num1 + num2 作为字符串。

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>

标签： javascriptclass

解决方案

所以这里出了一些问题：

  1. 不要使用文字字符串"this.num1 + this.num2"，而是使用接受变量并将它们相加的表达式this.num1 + this.num2。
  2. 你在没有出现在屏幕上的元素上使用了事件监听器，那么你怎么能点击它呢？您可能打算click在 idbutton而不是demo.
  3. 根据经验，我认为将 UI 逻辑与类逻辑结合起来并不好。为了将来使用，通常最好将它们分开。

祝你好运

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>

推荐阅读