- 如何避免submit自动跳转到不存在的页面?
- e.preventDefault()
- form.addEventListener('submit', function (e){. //这里就不再是click了,而是submit。
- }
- form里面的name定义用来干什么?
- 在js里面可以直接用form.elements.name来定位到这个元素,eg: form.elements.product.value;//直接定义到form里面一个命名为product的元素的值
- 怎么让输入框文字动态清空?
- 当完成某个输入事件之后,让输入框的内容更新为空字符: input.value = '';
-
-
<!DOCTYPE html> <head> <title>Grocery List</title> <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!--> <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <h1>Grocery List</h1> <form action="/nowhere"> <label for="item">Enter A Product</label> <input type="text" id="product" name="product"> <label for="item">Enter A Quantity</label> <input type="number" id="qty" name="qty"> <button>Submit</button> </form> <ul id="list"></ul> <script src = "app.js"></script> </body> </html>
const form = document.querySelector('form'); const ul = document.querySelector('ul'); form.addEventListener('submit', function (e){ e.preventDefault();//whent the form is submitted, prevent the default behavior const qty = form.elements.qty; const pdt = form.elements.product; newInfo(qty.value, pdt.value); qty.value = ''; //当执行了加入新条目(调用完newinfo function)到ul中之后,实时清空input里面的值 pdt.value = ''; }) const newInfo = (product, qty) =>{ const li = document.createElement('li'); li.innerText = `${qty} ${product}`; ul.append(li); //或者ul.appendChild(li); }
-