當我點擊按鈕時，輸入根本不顯示。如果我刪除表格 html 那么它可以工作，但我希望它以表格形式工作

Question

我知道這對某些人來說可能是一個愚蠢的問題，但我對此很陌生並且正在努力學習。 我已經堅持了好幾天了，無法弄清楚所以我來這里尋求幫助。 每當我按下按鈕時，它根本不顯示我的輸入。 我想讓它在用戶單擊按鈕時，他們的輸入將顯示在 ol 列表中。

 let form = document.getElementById("todo"); let list = document.getElementById("myList"); let input = document.getElementById("add1"); let input2 = document.getElementById("add2"); let button = document.getElementById("button"); let id = 1; button.addEventListener("click", addToDo) list.addEventListener("click", removeEvent) function addToDo (e) { let text = input.value; let textAdd = input2.value; let item = `<li class="del"> ${text} ============= ${textAdd} <button class="del">Delete</button>` list.insertAdjacentHTML("beforeend",item); id++; document.getElementById("add1").value = ""; document.getElementById("add2").value = ""; } function removeEvent(e) { if(e.target.classList.contains("del")) { list.removeChild(e.target.parentElement); list.removeChild(list); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <h1 id="name">Todo List</h1> <link href="project.css" rel="stylesheet"/> </head> <body> <div id="todo"> <h1>Name</h1> <input type="text" id="add1" placeholder="Title"> <br> <h1>Add Reminder</h1> <input type="text" id="add2" placeholder="Notes"> <button id="button">Submit</button> </div> <ol id="myList"> </ol> <script src="pro.js"></script> </body> </html>

Answer 1

表單中的按鈕有一些“特殊”之處。

如果您的 HTML 看起來像：

<form>
    <input placeholder="enter some text">
    <button>Click me</button>
</form>

您的按鈕將提交表單並因此將其重置。

我想您會希望表單具有一些關鍵屬性來執行此操作，即“操作”和“方法”（將輸入中的數據發送到某個遠程地址 - 因為這是表單的主要關注點）。

如果您希望您的按鈕只是一個按鈕，請使用以下內容：

<form>
    <input placeholder="enter some text">
    <button type="button">Click me</button>
</form>

你會看到：沒有任何反應。

我在這里為您創建了一個 StackBlitz（只需查看 HTML 文件）。 使用type="button" ，越來越多的輸入被添加到表單中。 如果你忽略這個，你可以看到輸入被添加，並且在它之后，表單立即重置自己（發送一個 GET 請求到'/'並刷新所有內容 - 但這是另一個問題）。

當我點擊按鈕時，輸入根本不顯示。如果我刪除表格 html 那么它可以工作，但我希望它以表格形式工作

問題描述

1 個解決方案

解決方案1
0 已采納 2020-12-07 02:40:06

當我點擊按鈕時，輸入根本不顯示。 如果我刪除表格 html 那么它可以工作，但我希望它以表格形式工作

問題描述

1 個解決方案

解決方案1 0 已采納 2020-12-07 02:40:06

當我點擊按鈕時，輸入根本不顯示。如果我刪除表格 html 那么它可以工作，但我希望它以表格形式工作

解決方案1
0 已采納 2020-12-07 02:40:06