提问者:小点点

Vanilla JS中具有4个值的按钮


我想使一个按钮与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)

这个代码有什么问题?


共1个答案

匿名用户

  1. DomContentLoaded
  2. 包装脚本
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树。最好使用事件