Created
October 30, 2019 01:14
-
-
Save AdryDev92/84d6b97a04c62faf19e07cdebe750339 to your computer and use it in GitHub Desktop.
A simple buy list with add/delete buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Lista de la compra</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| function ListaCompra() { | |
| var lista = document.getElementById("lista"); | |
| var li = document.createElement("li"); | |
| var elemento = document.getElementById("nuevoelemento").value; | |
| var texto = document.createTextNode(elemento); | |
| li.appendChild(texto); | |
| lista.appendChild(li); | |
| } | |
| function BorrarElemento(){ | |
| var posicion = document.getElementById("posicion").value; | |
| var borrarNodo = lista.getElementsByTagName("li")[posicion-1]; // el primer indice es 1 | |
| lista.removeChild(borrarNodo); | |
| } | |
| </script> | |
| <h2>Lista de la compra</h2> | |
| <ul id="lista"> | |
| <li>Leche</li> | |
| <li>Azucar</li> | |
| <li>Pimienta</li> | |
| <li>Pollo</li> | |
| <li>Miel</li> | |
| </ul> | |
| <input type="text" placeholder="Nuevo Elemento" id="nuevoelemento"> | |
| <input type="button" id="añadir" onclick="ListaCompra();" value="Añadir elemento"> | |
| <br> | |
| <input type="text" placeholder="Posicion Elemento" id="posicion"> | |
| <input type="button" id="borrar" onclick="BorrarElemento();" value="Borrar Elemento"> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment