อ่านค่าจากฟอร์มแล้วอัปเดตหน้า
ตัวอย่างสั้น: เพิ่มรายการ
<input id="noteInput" type="text" />
<button id="addBtn" type="button">เพิ่ม</button>
<ul id="list"></ul>
<script>
const input = document.querySelector("#noteInput");
const list = document.querySelector("#list");
const addBtn = document.querySelector("#addBtn");
addBtn.addEventListener("click", () => {
const text = input.value.trim();
if (!text) return;
const li = document.createElement("li");
li.textContent = text;
list.append(li);
input.value = "";
});
</script>
ใช้
type="button" เมื่อปุ่มไม่ได้อยู่ในฟอร์มส่ง — กันรีโหลดหน้าโดยไม่ตั้งใจ