英文:
clicking submit button appends content to the dom for a few seconds then vanishes
问题
I am trying to create a list type todo App. The code works fine up to a point. when I click on my submit button the list item is created and it can be briefly seen on the page after which it disappears. Here is my HTML:
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>My shopping list</h1>
<form class="form-control">
<div>
<label for="text">Enter a new item</label>
<input type="text" name="text" id="123">
</div>
<div>
<button>Submit</button>
</div>
</form>
<ul id="11"></ul>
</body>
</html>
and here is the JavaScript file:
const input = document.querySelector('input')
const list = document.querySelector('ul')
const button = document.querySelector('button')
button.addEventListener('click', () => {
const myData = input.value
input.value = '';
const newdiv = document.createElement('div')
newdiv.classList.add('newdiv');
const listInput = document.createElement('li')
const textdata = document.createElement('span')
textdata.textContent = myData;
const delButton = document.createElement('button')
delButton.textContent = 'delete';
listInput.appendChild(textdata)
newdiv.appendChild(listInput)
newdiv.appendChild(delButton)
list.appendChild(newdiv)
delButton.addEventListener('click', () => {
list.removeChild(newdiv)
})
})
希望有人能告诉我我做错了什么。
英文:
I am trying to create a list type todo App. The code works fine up to a point. when I click on my submit button the list item is created and it can be briefly seen on the page after which it disappears. Here is my 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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>My shopping list</h1>
<form class="form-control">
<div>
<label for="text">Enter a new item</label>
<input type="text" name="text" id="123" >
</div>
<div>
<button>Submit</button>
</div>
</form>
<ul id="11"></ul>
</body>
</html>
and here is the javacript file
const input = document.querySelector('input')
const list = document.querySelector('ul')
const button = document.querySelector('button')
button.addEventListener('click',()=>{
const myData = input.value
input.value = ''
const newdiv = document.createElement('div')
newdiv.classList.add('newdiv');
const listInput = document.createElement('li')
const textdata = document.createElement('span')
textdata.textContent = myData;
const delButton = document.createElement('button')
delButton.textContent = 'delete';
listInput.appendChild(textdata)
newdiv.appendChild(listInput)
newdiv.appendChild(delButton)
list.appendChild(newdiv)
delButton.addEventListener('click',()=>{
list.removeChild(listInput)
})
})
hopefully someone can tell me what I am doing wrong
答案1
得分: 1
.tags form` the keep and preventDefault see Please.
.https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
}(e) => {
e.preventDefault()
//code...
}```
英文:
Please see preventDefault and keep the form tags.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
button.addEventListener('click',(e) => {
e.preventDefault()
//code...
}
</details>
# 答案2
**得分**: 1
你的代码在没有表单时可以工作，因为表单不会在按钮点击时发送。
正如@Jack所说，要在按钮点击事件中添加event.preventDefault()以防止表单提交。
请查看下面的代码
```html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.querySelector('input')
const list = document.querySelector('ul')
const button = document.querySelector('button')
button.addEventListener('click',(event)=>{
event.preventDefault();
const myData = input.value
input.value = ''
const newdiv = document.createElement('div')
newdiv.classList.add('newdiv');
const listInput = document.createElement('li')
const textdata = document.createElement('span')
textdata.textContent = myData;
const delButton = document.createElement('button')
delButton.textContent = 'delete';
listInput.appendChild(textdata)
newdiv.appendChild(listInput)
newdiv.appendChild(delButton)
list.appendChild(newdiv)
delButton.addEventListener('click',()=>{
list.removeChild(listInput)
})
})
<!-- language: lang-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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>My shopping list</h1>
<form class="form-control">
<div>
<label for="text">Enter a new item</label>
<input type="text" name="text" id="123" >
</div>
<div>
<button>Submit</button>
</div>
</form>
<ul id="11"></ul>
</body>
</html>
<!-- end snippet -->
英文:
Without form your code works because form is not send on button click.
as @Jack said, add event.preventDefault() to button click event to prevent form submit.
See code below
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.querySelector('input')
const list = document.querySelector('ul')
const button = document.querySelector('button')
button.addEventListener('click',(event)=>{
event.preventDefault();
const myData = input.value
input.value = ''
const newdiv = document.createElement('div')
newdiv.classList.add('newdiv');
const listInput = document.createElement('li')
const textdata = document.createElement('span')
textdata.textContent = myData;
const delButton = document.createElement('button')
delButton.textContent = 'delete';
listInput.appendChild(textdata)
newdiv.appendChild(listInput)
newdiv.appendChild(delButton)
list.appendChild(newdiv)
delButton.addEventListener('click',()=>{
list.removeChild(listInput)
})
})
<!-- language: lang-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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>My shopping list</h1>
<form class="form-control">
<div>
<label for="text">Enter a new item</label>
<input type="text" name="text" id="123" >
</div>
<div>
<button>Submit</button>
</div>
</form>
<ul id="11"></ul>
</body>
</html>
<!-- end snippet -->
答案3
得分: 0
我只是删除了<form></form>标签，它按预期工作。
英文:
I just removed the <form></form> tag and it works as expected
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论