Blogger Information
Blog 11
fans 0
comment 0
visits 6375
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js-基础(四)dom实战——留言板
Technology has temperature
Original
613 people have browsed it
  1. <body>
  2. <input type="text" onkeydown="addMsg(this)" placeholder="请输入内容2" autofocus />
  3. <ul class="list"></ul>
  4. <script>
  5. function addMsg(ele){
  6. if(event.key === 'Enter'){
  7. // 1.获取显示留言的容器
  8. const ul = document.querySelector('.list');
  9. // 2.判断用户留言是否为空
  10. if(ele.value.trim().length === 0 ){
  11. alert('请输入');
  12. ele.focus();
  13. return false;
  14. }
  15. // 3.添加一条新留言
  16. const li = document.createElement('li');
  17. li.innerHTML = ele.value + '<button onclick = "del(this.parentNode)">删除</button>';
  18. ul.insertAdjacentElement('afterBegin',li);
  19. // 4.将输入框中的前一条留言清空
  20. ele.value=null;
  21. // 5.焦点重置
  22. ele.focus();
  23. }
  24. }
  25. function del(ele){
  26. return confirm('是否删除?') ? ele.remove() : false;
  27. }
  28. </script>
  29. </body>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post