<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping list example</title>
<style>
li {
margin-bottom: 10px;
}
li button {
font-size: 8px;
margin-left: 20px;
color: #666;
}
</style>
</head>
<body>
<h1>My shopping list</h1>
<div>
<label for="item">Enter a new item:</label>
<input type="text" name="item" id="item">
<button>Add item</button>
</div>
<ul>
</ul>
<script>
const btn = document.querySelector('button');
let ul = document.querySelector('ul');
let input = document.querySelector('input');
btn.addEventListener('click', () => {
let v = input.textContent;
let sp = document.createElement('span');
let btn2 = document.createElement('button');
sp.innerHTML = v;
let u_i = document.createElement('li');
u_i.appendChild(sp);
btn2.textContent = 'delete';
u_i.appendChild(btn2);
input.value = '';
ul.appendChild(u_i);
});
</script>
</body>
</html>
I want to append a li element but i keep running into errors. IDK why but the li element's text content won't render and it is causing errors. This is a novice issue. It is pretty simple. I want to create a list that adds items to the span/ul elements in HTML to render a complete list of shopping items for the customer so as they shop they can visit each item 1 by 1 and delete the item as they pick up the item in the shop. I believe this will be a revolutionary on how humans create list of things they need to remember and click them off one by one as they complete the things they need to do. I will call it a 'check list' and hopefully my app will go public and be featured on the NYSE in edition to changing the way humans fundamentally make list. This List is not only limited to shopping but can be used for anything in which humans must record several items, objects, task, needs, wants, duties or even actions.
Use let v = input.value instead of let v = input.textContent; value will return the text value of the input field.