I need to create a function using a prompt method to add a grocery item to a grocery list. I have no problems with html, however JavaScript is very new to me and I am struggling. I also need to make this list be able to tell whether an item is already added or not. If it is, I need an alert prompt to show up, which I believe I have. It's just the adding an item to a list and then having a delete button to delete an item if the user so desires, that is troubling me.
My HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Mutation Events</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="page">
<h1>List King</h1>
<h2>Buy Groceries <span id="counter">1</span></h2>
<ul id="list">
<li>fresh figs<a href="#" class="delete">Delete</a></li>
</ul>
<div class="button"><a href="#" id="add" class="add">Add list item</a></div>
</div>
<script src="js/grocery.js"></script>
</body>
</html>
I have an add button and a delete button for this grocery list. Now I just have to code it to make it work.
My JavaScript code I have so far:
var elList, addLink, counter; // Declare variables
var $ = function(id) { return document.getElementById(id); };
elList = $('list'); // Get <ul> list
addLink = $('add'); // Get add item button
counter = $('counter'); // Get item counter
function updateCount() { // Define updateCount function
var listItems;
listItems = elList.getElementsByTagName('li').length; // Get total of <li>s
counter.innerHTML = listItems; // Update counter
}
// Declare function to add an item in the list
function addItem() {
let sign = prompt("add new item as nth item");
n = counter.innerHTML + 1
if (sign.toLowerCase() == n) {
alert("Did not enter a new item. Try again!");
}
Sorry for the messy code. Any help is appreciated.
This seems to do what you want (let me know if you need some explanation). If you are only placing text then you should use textContent instead of innerHTML. In the example above you have an anchor tag in your lists. You can use document.createElement "a" and append to the new list element to achieve the same result.
<button onclick="myFunction()">Trigger prompt</button>
<ul id="list">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<script>
function myFunction() {
var drink = prompt("Please enter a drink", "Soda");
if (drink != null) {
var list = document.getElementById('list');
var newListItem = document.createElement('li');
newListItem.innerHTML = drink;
list.appendChild(newListItem);
}
}
</script>
One approach would be to create a button in your html code and add an event listener to it. The event listener triggers the addItem function as far as you click on it. You have to create a child element li for your list, each time you want to add a new item. After you have created your item, you can simply append it with the appendChild method of your parent element.
With this in mind, you should be able to implement the removeItem function by yourself.
const $ = function(id) { return document.getElementById(id); };
// add an event listener to your button
const button = document.getElementById('addButton');
button.addEventListener('click', addItem);
function updateCount() {
const counter = $('counter');
const elList = $('list');
counter.innerHTML = elList.children.length;
}
function addItem() {
const sign = prompt("add new item as nth item");
// add your condition here
// create a li element
const elList = $('list');
const li = document.createElement('li');
li.innerHTML = sign;
elList.appendChild(li);
// update counter
updateCount();
}
// TODO: create a delete button for each element
// TODO: write a remove method<div id="page">
<h1>List King</h1>
<h2>Buy Groceries <span id="counter">1</span></h2>
<ul id="list">
<li>fresh figs<a href="#" class="delete">Delete</a></li>
</ul>
<!-- create a button -->
<button id="addButton">Add item</button>
</div>