我想使一个按钮与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)
这个代码有什么问题?
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树。最好使用事件