อ่านค่าจากฟอร์มแล้วอัปเดตหน้า

ตัวอย่างสั้น: เพิ่มรายการ

<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" เมื่อปุ่มไม่ได้อยู่ในฟอร์มส่ง — กันรีโหลดหน้าโดยไม่ตั้งใจ