如何将 class 分配给 innerHTML？

Question

我有一个表单，我想在单击按钮时打印结果。我知道如何将基本函数的结果分配给 innerHTML 但是如果我有 class?

怎么办

我有这样的东西：


    Weight: <input type="number" id="weight" /><br/> Height: <input type="number" id="height" /><br/>

    <button type="button" id="submit">Submit</button>

    <span id="result"></span>


    class SomeClass {
        constructor() {
            this.number = 0;
            this.weight = document.getElementById('weight').value;
            this.height = document.getElementById('height').value;
        }

        FirstMethod() {
            if (this.weight < 10) {
                this.number += 1;
                return this.number;
            }
        }

        SecondMethod() {
            if (this.height < 10) {
                this.number += 2;
                return this.number;
            }
        }
    }

在顶部：


    document.getElementById('submit').addEventListener('click', result);

    function result() {
        let overall = new SomeClass().FirstMethod().SecondMethod().number;
        document.getElementById('result').innerHTML = overall;
    }

我收到一个错误 "Uncaught TypeError: (intermediate value).FirstMethod(...).SecondMethod is not a function"。我尝试了很多不同的方法，但没有任何效果。

Answer 1

你不能链接new的调用。您需要先将其作为实例存储在变量中。

 function result() {
        let overall = new SomeClass();
        overall = overall.FirstMethod().SecondMethod().number;
        document.getElementById('result').innerHTML = overall;
    }

但更好的做法是像这样让它不可变：

 function result() {
        let overallInstance = new SomeClass();
        let overall = overallInstance.FirstMethod().SecondMethod().number;
        document.getElementById('result').innerHTML = overall;
    }

我还注意到，您 return FirstMethod() 中的一个值。这必须 return 实例本身才能允许链式调用。

Answer 2

您不能使用 FirstMethod().SecondMethod()

尝试使用

let my_object = new SomeClass();
my_object.FirstMethod();
my_object.SecondMethod();

document.getElementById('result').innerHTML = my_object.number

如何将 class 分配给 innerHTML？

How to assign class to innerHTML?

javascript

class

function

innerhtml