无法在回调中更改元素的 innerText答案

【问题标题】：Can't change an element's innerText inside a callback无法在回调中更改元素的 innerText
【发布时间】：2022-02-05 16:19:21
【问题描述】：

我正在尝试构建一个动态的“重置”按钮，该按钮会在循环中更改其 innerText 两次：第一次单击时（从“重置”更改为“您确定吗？”），再次单击时（更改从“你确定吗？”到“重置”）。但是，我无法修改回调中的 innerText 。似乎我可以从 DOM 控制台很好地修改 innerText，所以我假设在 JS 中事件回调的工作方式方面我还不知道一些东西，我不知道它是什么。

function show_confirm_button() {
    document.getElementById('reset-button').innerText = "Are you sure?";
    document.getElementById('reset-button').onclick = reset_button;
}


function reset_button() {
    /* resetting things here */
    
    document.getElementById('reset-button').innerText = "Reset";
    document.getElementById('reset-button').onclick = show_confirm_button;
}

show_confirm_button() 用于一个简单的引导按钮：

<button class="..." type="button" onclick=show_confirm_button()>
    <span id="reset-button">Reset</span>
</button>

我错过了什么？

【问题讨论】：

您应该更改按钮的onclick，而不是跨度。

标签： javascript html bootstrap-5

【解决方案1】：

正如@Barmar 所说：

您应该更改按钮的onclick，不 span。

这应该可行：

function show_confirm_button() {
    document.getElementById('reset-button-text').innerText = "Are you sure?";
    document.getElementById('reset-button').onclick = reset_button;
}


function reset_button() {
    /* resetting things here */
    
    document.getElementById('reset-button-text').innerText = "Reset";
    document.getElementById('reset-button').onclick = show_confirm_button;
}

<button class="..." type="button" onclick=show_confirm_button() id="reset-button">
    <span id="reset-button-text">Reset</span>
</button>

【讨论】：