<input type="text" id="producto" > <input type="button" id="compra" value="Comprar"> <input type="button" id="ordenar" value="Ordenar"> <input type="button" id="ordenar2" value="Ordenar desc"> <div id="cesta"></div>
var cesta = []; document.getElementById("compra").addEventListener("click", comprar); document.getElementById("ordenar").addEventListener("click", function () { ordenar(1); }); document.getElementById("ordenar2").addEventListener("click", function () { ordenar(2); }); document.getElementById("producto").addEventListener("keypress", tecla); function comprar() { var producto = document.getElementById('producto').value; if (producto.trim() !== "" && cesta.indexOf(producto) === -1) { cesta.push(producto); document.getElementById('producto').value = ""; mostrar(); } else { alert("Producto incorrecto o repetido"); } } function tecla(event) { if (event.keyCode === 13 || event.key === "+") { comprar(); event.preventDefault(); } if (event.key >= "0" && event.key <= "9") { event.preventDefault(); } } function ordenar(tipo) { cesta.sort(); if (tipo === 2) { cesta.reverse(); } mostrar(); } function mostrar() { var resultado = document.getElementById('cesta'); resultado.innerHTML = ""; for (var i = 0; i < cesta.length; i++) { var parrafo = document.createElement("p"); parrafo.innerHTML = i + ".- " + cesta[i]; var boton = document.createElement("button"); boton.innerHTML = "X"; boton.id=i; boton.addEventListener("click", function () { borrar(this.id); }) parrafo.appendChild(boton); resultado.appendChild(parrafo); } } function borrar(i) { cesta.splice(i, 1); mostrar(); }