如何将类分配给innerHTML？答案

【问题标题】：How to assign class to innerHTML?如何将类分配给innerHTML？
【发布时间】：2019-10-03 16:44:24
【问题描述】：

我有一个表单，我想在单击按钮时打印结果。我知道如何将基本功能的结果分配给 innerHTML，但是如果我有一个类呢？

我有这样的事情：


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

我收到错误“未捕获的 TypeError：（中间值）.FirstMethod(...).SecondMethod 不是函数”。我尝试了很多不同的方法，但没有任何效果。

【问题讨论】：

标签： javascript function class innerhtml

【解决方案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;
    }

我还注意到，您在 FirstMethod() 中返回了一个值。这必须返回实例本身以允许可链接调用。

【讨论】：

我也不知道为什么有人投反对票，它有效:)

【解决方案2】：

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

尝试使用

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

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

【讨论】：