我正在上編程課程，我需要使用 javascript 和 HTML 創建一個“待辦事項”串列頁面。無論用戶在文本框中鍵入什么內容，都應顯示在頁面下方的“待辦事項串列”標題下方。我無法將表單中提交的資訊顯示在待辦事項串列標題下方的頁面上。到目前為止，這是我的代碼。
const formE1 = document.getElementById('todo-form');
const inputE1 = document.getElementById('todo-item');
const list = document.getElementById('to-do');
formE1.addEventListener('submit', function(event) {
event.preventDefault();
const li = document.getElementById('the-list');
document.createElement('li');
inputE1.appendChild(li);
console.log(formE1)
})
const input = document.querySelector('ol');
let template = ''
for (let i = 0; i < inputE1.length; i ) {
const item = `
<li>
<p>Name: ${inputE1}</p>
</li>
`
template = item;
}
input.innerHTML = template;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<h1>Add a Todo</h1>
<div id="todo-list">
<form id="todo-form">
<input type="text" id="todo-item" placeholder="List Item"/>
<input type="submit" id="todo-add" value="Submit"/>
</form>
<div id="to-do">
<h2>To-Do List</h2>
<ol id="the-list"></ol>
</div>
</div>
<script src="main.js"></script>
</body>
</html>uj5u.com熱心網友回復：
關鍵是您試圖在處理程式之外執行代碼。
你可以稍微簡化你的代碼。form例如，沒有真正需要元素，因此將偵聽器添加到您的按鈕。
const button = document.querySelector('button');
const input = document.querySelector('input');
const list = document.querySelector('ol');
button.addEventListener('click', function(e) {
const li = document.createElement('li');
li.textContent = input.value;
list.appendChild(li);
});<h1>Add a Todo</h1>
<div>
<input type="text" placeholder="List Item" />
<button type="button">Submit</button>
<div>
<h2>To-Do List</h2>
<ol></ol>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/463121.html
標籤：javascript html 形式 添加事件监听器