Necesito crear una función usando un método rápido para agregar un artículo de comestibles a una lista de comestibles. No tengo problemas con html, sin embargo, JavaScript es muy nuevo para mí y estoy luchando. También necesito hacer que esta lista pueda decir si un elemento ya se agregó o no. Si es así, necesito que aparezca un mensaje de alerta, que creo que tengo. Es solo agregar un elemento a una lista y luego tener un botón de eliminación para eliminar un elemento si el usuario así lo desea, lo que me preocupa.
Mi código HTML:
<!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>Tengo un botón para agregar y un botón para eliminar para esta lista de compras. Ahora solo tengo que codificarlo para que funcione.
Mi código JavaScript que tengo hasta ahora:
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!"); }Lo siento por el código desordenado. Cualquier ayuda es apreciada.
Esto parece hacer lo que quieres (avísame si necesitas alguna explicación). Si solo está colocando texto, debe usar textContent en lugar de innerHTML. En el ejemplo anterior, tiene una etiqueta de anclaje en sus listas. Puede usar document.createElement "a" y agregarlo al nuevo elemento de la lista para lograr el mismo resultado.
<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>Un enfoque sería crear un botón en su código html y agregarle un detector de eventos. El detector de eventos activa la función addItem en la medida en que hace click en él. Debe crear un elemento secundario li para su lista, cada vez que desee agregar un nuevo elemento. Una vez que haya creado su elemento, simplemente puede agregarlo con el método appendChild de su elemento principal.
Con esto en mente, debería poder implementar la función removeItem usted mismo.
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>