<!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);
}
浙公网安备 33010602011771号