我是 JS 新手，我正在創建一個表單，我將在其中單擊保存按鈕，輸入的文本將顯示在頁面中，但是當我單擊保存按鈕時，更改會顯示一秒鐘并消失。
源代碼 ：
function save(){
save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText = save_element;
}<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html> uj5u.com熱心網友回復：
的默認行為<form>是將表單資料提交給服務器。您需要通過使用來防止這種默認行為preventDefault。
function save(event) {
event.preventDefault(); // Skip default behaviour
const save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText = save_element;
}<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id="input_element">
<br>
<button id="ds" onclick="save(event)">SAVE</button>
<h1 id="saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>uj5u.com熱心網友回復：
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="#">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
試試<form action="#">，通過使用這個你的頁面將不會被重新加載。默認行為<form action="">是提交，所以它會重新加載頁面。
uj5u.com熱心網友回復：
好的，更改消失了，因為頁面正在重新加載到空白處
<form action="">
更改為類似的哈希
<form action="#">
給您的表單一個 ID。然后在您單擊事件時阻止默認 .... 像這樣
let form = document.getElementById("MyForm");
//Custom Event ...
form.addEventListener('submit', (e) => {
// on form submission, prevent default
e.preventDefault();
//your other Code to change the text
});
這將防止表單重新加載您的頁面
uj5u.com熱心網友回復：
該按鈕具有默認型別submit并正在嘗試提交表單。
因此，如果您將按鈕定義為按鈕。有用。
<button type="button" id="ds" onclick="save()">SAVE</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438227.html
標籤：javascript html
上一篇：貓頭鷹旋轉木馬的任何節目滑塊