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

Question

我正在尝试构建一个动态的“重置”按钮，该按钮在循环中更改其 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>

我错过了什么？

Answer 1

正如@Barmar 所说：

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

这应该有效：

 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>