我對 Javascript 比較陌生，目前正在嘗試一些東西。我在 w3schools 中偶然發現了一個關于如何在按下按鈕后更改按鈕顏色的教程。
我想做類似的事情，但是當按下按鈕時加載另一個頁面，其中包含一些搜索查詢結果。
我的 html 代碼如下：
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
<script type="text/javascript" src="search.js" defer></script>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<main>
<form>
<input type="search" id="query" placeholder="Search...">
<button id="submit">Search</button>
</form>
</main>
</body>
</html>
這是相應的javascript代碼：
const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);
function testmethod() {
window.location.href="search.html";
}
代碼本身似乎正在運行，但每當按下按鈕時，search.html 頁面會在恢復之前加載一秒鐘。我什至直接從 w3schools 教程中復制了代碼，但它仍然無法正常作業。知道是什么原因導致按下按鈕后頁面被改回來嗎？
提前致謝！
uj5u.com熱心網友回復：
更改位置或提交表單將（重新）加載（目標）頁面 - 您正在同時進行。
您可以通過傳入事件并在 testmethod 中使用 event.preventDefault() 開始，然后執行其他操作而不是更改位置
我強烈建議不要將事件分配給提交按鈕，而是使用提交事件
也永遠不要在表單中呼叫任何提交
function testmethod(e) {
e.preventDefault(); // stop submission
console.log(this.query.value);
this.subbut.style.color = "red";
}
document.getElementById("myForm").addEventListener("submit", testmethod);<main>
<form id="myForm">
<input type="search" name="query" id="query" placeholder="Search...">
<button name="subbut">Search</button>
</form>
</main>如果您不需要提交表單，請使用 type="button" 而沒有表單
function testmethod(e) {
console.log(document.getElementById("query").value)
this.style.color = "red";
}
document.getElementById("subbut").addEventListener("click", testmethod);<main>
<input type="search" id="query" placeholder="Search...">
<button type="button" id="subbut">Search</button>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/371493.html
上一篇：AJAX從PHP接收多個結果