Vanilla JS中具有4个值的按钮

Question

我想使一个按钮与4个不同的文本，将切换后点击它。

HTML：

<button onclick="changeButton()" class="button" id="button">EUR -> BTC</button>

JS：

function changeButton() {
let btn = document.getElementById("button");
if (btn.innerHTML === "EUR -> BTC") {
    btn.innerHTML = "BTC -> EUR"
} elseif (btn.innerHTML === "BTC -> EUR") {
    btn.innerHTML = "PLN -> BTC"
} else {
    btn.innerHTML = "BTC -> PLN"
}

}

我得到了这个：

index.html:15 Uncaught ReferenceError: changeButton is not defined
at HTMLButtonElement.onclick (index.html:15)

这个代码有什么问题？

Answer 1

1. 用DomContentLoaded
包装脚本

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

https://developer.mozilla.org/ko/docs/web/api/window/domcontentloaded_event

您的脚本代码没有运行，因为dom树在js脚本加载之前没有准备好工作

function changeButton(event) {
  const text = event.target.textContent
if ( text === "EUR -> BTC") {
  event.target.textContent = "BTC -> EUR"
} else if (text === "BTC -> EUR") {
    event.target.textContent = "PLN -> BTC"
} else {
  event.target.textContent = "BTC -> PLN"
}

当您尝试搜索之类的元素时，让btn=document.getElementById（“button”）浏览器必须在您单击按钮时搜索dom树。最好使用事件