在 HTML/JS 中显示变量的当前状态？

Question

所以我正在开发一个网页，我想在其中的一部分显示一个变量的值。该变量由许多函数操作，我希望显示的值作为变量的当前值。我到底该怎么做？

顺便说一句，这是代码。即使函数操作变量，它仍然显示“1”

var cpc = 1;
document.getElementById("curcpc").innerHTML = cpc;

Answer 1

没有什么会在变量更改时自动为您更新 DOM。（有很多的库或框架会为你更新 DOM 如果你遵循他们的规则来改变它，但没有任何东西会完全自动完成。）

有几种方法可以做到。

更新函数/访问器

解决这个问题的一个简单方法是而不是使它成为一个简单的变量。相反，将其设置为需要函数调用的内容，并让函数调用更新变量和 DOM.

您可以将其更新为显式函数调用（显式通常很好！），或者您可以将其设为具有 getter 和 setter 的访问器属性。好处是您不会错过任何更新。缺点是每次获取或设置“变量”的值时都是一个函数调用（尽管使用访问器它看起来不像一个）。

这是一个使用访问器的基本版本：

const data = (() => {
    let cpc;
    const curcpc = document.getElementById("curcpc");
    
    return {
        get cpc() {
            return cpc;     // Returns the value of the variable
                            // declared above
        },
        set cpc(newValue) {
            cpc = newValue; // Updates the var above
            curcpc.innerHTML = cpc;
        }
    };
})();
data.cpc = 0;

// Some place updating it
document.getElementById("btn-add").addEventListener("click", () => {
    ++data.cpc;
});

// Some other place updating it
document.getElementById("btn-subtract").addEventListener("click", () => {
    --data.cpc;
});

<div id="curcpc"></div>
<input type="button" value="+" id="btn-add">
<input type="button" value="−" id="btn-subtract">

但这里有一个更高效的版本，直到浏览器下次要绘制页面时才更新显示（通过 requestAnimationFrame 请求回调），这意味着重复更新不会已经可见，不要不必要地制作：

const data = (() => {
    let cpc;
    const curcpc = document.getElementById("curcpc");
    let rAFHandle = 0;
    
    const updateCurCpc = () => {
        curcpc.innerHTML = cpc;
        rAFHandle = 0;
    };
    
    return {
        get cpc() {
            return cpc; // Returns the value of the variable
                        // declared above
        },
        set cpc(newValue) {
            cpc = newValue;
            if (!rAFHandle) {
                rAFHandle = requestAnimationFrame(updateCurCpc);
            }
        }
    };
})();
data.cpc = 0;

// Some place updating it
document.getElementById("btn-add").addEventListener("click", () => {
    ++data.cpc;
});

// Some other place updating it
document.getElementById("btn-subtract").addEventListener("click", () => {
    --data.cpc;
});

<div id="curcpc"></div>
<input type="button" value="+" id="btn-add">
<input type="button" value="−" id="btn-subtract">

包装处理程序

另一种方法是将任何事件处理程序等包装在一个函数中，该函数会记住旧值并在事件处理程序完成后更新 DOM 如果值已更改。这样做的好处是 reading/writing 变量是一个简单的 read/write，而不是函数调用，但增加了在每个事件处理程序完成后进行比较的成本以及添加忘记包装的处理程序的可能性.

这是一个基本示例（没有 requestAnimationFrame，在这种情况下并没有增加太多）：

let cpc = 0;
const curcpc = document.getElementById("curcpc");
curcpc.innerHTML = cpc;

const wrapHandler = (handler) => {
    // Return a non-arrow function (we want `this` set by the caller)
    return function(...args) {
        try {
            const result = handler.apply(this, args);
            curcpc.innerHTML = cpc;
            return result;
        } catch (e) {
            curcpc.innerHTML = cpc;
            throw e;
        }
    };
};

// Some place updating it
document.getElementById("btn-add").addEventListener("click", wrapHandler(() => {
    ++cpc;
}));

// Some other place updating it
document.getElementById("btn-subtract").addEventListener("click", wrapHandler(() => {
    --cpc;
}));

<div id="curcpc"></div>
<input type="button" value="+" id="btn-add">
<input type="button" value="−" id="btn-subtract">

Answer 2

var cpc = 1;
 
function updateValue(destination, newValue) {
    document.getElementById(destination).innerHTML = newValue;
}

然后你可以从任何你喜欢的地方用你喜欢的任何值触发这个更新。例如用法：

updateValue('curcpc', cpc);

在 HTML/JS 中显示变量的当前状态？

Show current state of variable in HTML/JS?

html

javascript

variables

script-tag

更新函数/访问器

包装处理程序