点击提交按钮后，将内容附加到DOM中几秒钟，然后消失。

huangapple
go评论114阅读模式
英文:

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:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css">
  9.     <script src="/script.js" defer></script>
  10. </head>
  12. <body>
  13.    <h1>My shopping list</h1>
  14.    <form class="form-control">
  15.     <div>
  16.       <label for="text">Enter a new item</label>
  17.       <input type="text" name="text" id="123">
  18.     </div>
  19.     <div>
  20.       <button>Submit</button>
  21.     </div>
  22.   </form>
  23.   <ul id="11"></ul>
  24. </body>
  25. </html>

and here is the JavaScript file:

  1. const input = document.querySelector('input')
  2. const list = document.querySelector('ul')
  3. const button = document.querySelector('button')
  5. button.addEventListener('click', () => {
  6.   const myData = input.value
  7.   input.value = '';
  9.   const newdiv = document.createElement('div')
  10.   newdiv.classList.add('newdiv'); 
  12.   const listInput = document.createElement('li')
  14.   const textdata = document.createElement('span')
  15.   textdata.textContent = myData;
  17.   const delButton = document.createElement('button')
  18.   delButton.textContent = 'delete';
  19.   
  20.   listInput.appendChild(textdata)
  21.   newdiv.appendChild(listInput)
  22.   newdiv.appendChild(delButton)
  24.   list.appendChild(newdiv)
  26.   delButton.addEventListener('click', () => {
  27.     list.removeChild(newdiv)
  28.   })
  29. })

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

英文:

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

  1. &lt;html lang=&quot;en&quot;&gt;
  2. &lt;head&gt;
  3.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  4.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.     &lt;title&gt;Document&lt;/title&gt;
  7.     &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  8.     &lt;script src=&quot;/script.js&quot; defer&gt;&lt;/script&gt; 
  9.     
  10.        
  11. &lt;/head&gt;
  13. &lt;body&gt;
  14.    &lt;h1&gt;My shopping list&lt;/h1&gt;
  15.    &lt;form class=&quot;form-control&quot;&gt;
  16.     &lt;div&gt;
  17.       &lt;label for=&quot;text&quot;&gt;Enter a new item&lt;/label&gt;
  18.       &lt;input type=&quot;text&quot; name=&quot;text&quot; id=&quot;123&quot; &gt;
  19.     &lt;/div&gt;
  20.     &lt;div&gt;
  21.       &lt;button&gt;Submit&lt;/button&gt;
  22.     &lt;/div&gt;
  23.   &lt;/form&gt;
  24.   &lt;ul id=&quot;11&quot;&gt;&lt;/ul&gt;
  25.    
  26. &lt;/body&gt;
  27. &lt;/html&gt;

and here is the javacript file

  1. const input = document.querySelector(&#39;input&#39;)
  2. const list = document.querySelector(&#39;ul&#39;)
  3. const button = document.querySelector(&#39;button&#39;)
  5. button.addEventListener(&#39;click&#39;,()=&gt;{
  6.   const myData = input.value
  7.   input.value = &#39;&#39;
  9.   const newdiv = document.createElement(&#39;div&#39;)
  10.   newdiv.classList.add(&#39;newdiv&#39;); 
  12.   const listInput = document.createElement(&#39;li&#39;)
  14.   const textdata = document.createElement(&#39;span&#39;)
  15.   textdata.textContent = myData;
  17.   const delButton = document.createElement(&#39;button&#39;)
  18.   delButton.textContent = &#39;delete&#39;;
  19.   
  20.   listInput.appendChild(textdata)
  21.   newdiv.appendChild(listInput)
  22.   newdiv.appendChild(delButton)
  24.   list.appendChild(newdiv)
  26.   delButton.addEventListener(&#39;click&#39;,()=&gt;{
  27.     list.removeChild(listInput)
  28.   })
  31. })

hopefully someone can tell me what I am doing wrong

答案1

得分: 1

  1. .tags form` the keep and preventDefault see Please.
  2. .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

  1. button.addEventListener(&#39;click&#39;,(e) =&gt; {
  2. e.preventDefault()
  4. //code...
  6. }
  9. </details>
  13. # 答案2
  14. **得分**: 1
  16. 你的代码在没有表单时可以工作，因为表单不会在按钮点击时发送。
  18. 正如@Jack所说，要在按钮点击事件中添加event.preventDefault()以防止表单提交。
  20. 请查看下面的代码
  22. ```html
  23. <!-- begin snippet: js hide: false console: true babel: false -->
  25. <!-- language: lang-js -->
  27. const input = document.querySelector('input')
  28. const list = document.querySelector('ul')
  29. const button = document.querySelector('button')
  31. button.addEventListener('click',(event)=>{
  32.   event.preventDefault();
  33.   const myData = input.value
  34.   input.value = ''
  36.   const newdiv = document.createElement('div')
  37.   newdiv.classList.add('newdiv'); 
  39.   const listInput = document.createElement('li')
  41.   const textdata = document.createElement('span')
  42.   textdata.textContent = myData;
  44.   const delButton = document.createElement('button')
  45.   delButton.textContent = 'delete';
  46.   
  47.   listInput.appendChild(textdata)
  48.   newdiv.appendChild(listInput)
  49.   newdiv.appendChild(delButton)
  51.   list.appendChild(newdiv)
  53.   delButton.addEventListener('click',()=>{
  54.     list.removeChild(listInput)
  55.   })
  58. })
  60. <!-- language: lang-html -->
  62. <html lang="en">
  63. <head>
  64.     <meta charset="UTF-8">
  65.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  66.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  67.     <title>Document</title>
  68.     <link rel="stylesheet" href="style.css">
  69.     <script src="/script.js" defer></script> 
  70. </head>
  72. <body>
  73.    <h1>My shopping list</h1>
  74.    <form class="form-control">
  75.     <div>
  76.       <label for="text">Enter a new item</label>
  77.       <input type="text" name="text" id="123" >
  78.     </div>
  79.     <div>
  80.       <button>Submit</button>
  81.     </div>
  82.   </form>
  83.   <ul id="11"></ul>
  84.    
  85. </body>
  86. </html>
  88. <!-- 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 -->

  1. const input = document.querySelector(&#39;input&#39;)
  2. const list = document.querySelector(&#39;ul&#39;)
  3. const button = document.querySelector(&#39;button&#39;)
  5. button.addEventListener(&#39;click&#39;,(event)=&gt;{
  6.   event.preventDefault();
  7.   const myData = input.value
  8.   input.value = &#39;&#39;
  10.   const newdiv = document.createElement(&#39;div&#39;)
  11.   newdiv.classList.add(&#39;newdiv&#39;); 
  13.   const listInput = document.createElement(&#39;li&#39;)
  15.   const textdata = document.createElement(&#39;span&#39;)
  16.   textdata.textContent = myData;
  18.   const delButton = document.createElement(&#39;button&#39;)
  19.   delButton.textContent = &#39;delete&#39;;
  20.   
  21.   listInput.appendChild(textdata)
  22.   newdiv.appendChild(listInput)
  23.   newdiv.appendChild(delButton)
  25.   list.appendChild(newdiv)
  27.   delButton.addEventListener(&#39;click&#39;,()=&gt;{
  28.     list.removeChild(listInput)
  29.   })
  32. })

<!-- language: lang-html -->

  1. &lt;html lang=&quot;en&quot;&gt;
  2. &lt;head&gt;
  3.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  4.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.     &lt;title&gt;Document&lt;/title&gt;
  7.     &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  8.     &lt;script src=&quot;/script.js&quot; defer&gt;&lt;/script&gt; 
  9.     
  10.        
  11. &lt;/head&gt;
  13. &lt;body&gt;
  14.    &lt;h1&gt;My shopping list&lt;/h1&gt;
  15.    &lt;form class=&quot;form-control&quot;&gt;
  16.     &lt;div&gt;
  17.       &lt;label for=&quot;text&quot;&gt;Enter a new item&lt;/label&gt;
  18.       &lt;input type=&quot;text&quot; name=&quot;text&quot; id=&quot;123&quot; &gt;
  19.     &lt;/div&gt;
  20.     &lt;div&gt;
  21.       &lt;button&gt;Submit&lt;/button&gt;
  22.     &lt;/div&gt;
  23.   &lt;/form&gt;
  24.   &lt;ul id=&quot;11&quot;&gt;&lt;/ul&gt;
  25.    
  26. &lt;/body&gt;
  27. &lt;/html&gt;

<!-- end snippet -->

答案3

得分: 0

我只是删除了<form></form>标签，它按预期工作。

英文:

I just removed the &lt;form&gt;&lt;/form&gt; tag and it works as expected

huangapple
  • 本文由 发表于 2023年5月26日 15:28:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76338554.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定