javascript 单击提交按钮将内容附加到dom几秒钟，然后消失

tquggr8v 于 2021-06-06 发布在 Java

关注(0)|答案(3)|浏览(146)

我正在尝试创建一个列表类型的待办事项应用程序。代码在某种程度上工作得很好。当我点击我的提交按钮时，列表项被创建，它可以在页面上短暂地看到，之后它消失了。这是我的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>

这里是javacript文件

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)
  })

})

希望有人能告诉我我做错了什么

JavaScript

来源：https://stackoverflow.com/questions/76338554/clicking-submit-button-appends-content-to-the-dom-for-a-few-seconds-then-vanishe

3条答案

按热度按时间

laawzig21#

我只是删除了<form></form>标记，它可以按预期工作

赞(0）回复(0）举报 2021-06-27

5f0d552i2#

请参阅preventDefault并保留form标记。
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

button.addEventListener('click',(e) => {
e.preventDefault()

//code...

}

赞(0）回复(0）举报 2021-06-27

ttisahbt3#

如果没有表单，您的代码可以正常工作，因为表单不是在单击按钮时发送的。
正如@Jack所说，在按钮点击事件中添加event.preventDefault（）来防止表单提交。
参见下面的代码

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)
  })

})

<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>

赞(0）回复(0）举报 2021-06-27

我来回答

javascript 单击提交按钮将内容附加到dom几秒钟，然后消失

3条答案

相关问题

热门标签

最新问答