En este momento, estoy trabajando en un proyecto de menú en el que los clientes ingresan texto y envía lo que escribieron en una UL separada en un div separado, algo así como un menú de carrito de compras.
Todo funciona bien, pero me di cuenta de que puedo escribir lo que quiera en este div, incluido el galimatías, y aparecerá. Me gustaría hacer una serie de palabras permitidas (p. ej., Pasta, Milk, Eggs, etc.), pero me cuesta encontrar una manera de escribir eso. Estaba pensando en usar una declaración if pero no estoy seguro exactamente de cómo la escribiría. Cualquier ayuda sería apreciada.
function addLi() { let input = document.getElementById("input").value; let listNode = document.getElementById("list"); let liNode = document.createElement("li"); let txtNode = document.createTextNode(input); liNode.appendChild(txtNode); listNode.appendChild(liNode); } <div class="menu-items"> <h2>Added Items</h2> <ul id="list"> </ul> </div>Cree una matriz de términos permitidos y, dentro de su función, verifique si el valor ingresado está en esa lista:
const whiteList = ['pasta', 'milk', 'apples']; function addLi() { let input = document.getElementById("input").value; if (whiteList.includes(input.toLowerCase())) { const listNode = document.getElementById("list"); const liNode = document.createElement("li"); const txtNode = document.createTextNode(input); liNode.appendChild(txtNode); listNode.appendChild(liNode); } } document.getElementById('addItem').addEventListener('click', addLi); <div class="menu-items"> <h2>Added Items</h2> <input type="text" id="input"> <button type="button" id="addItem">Add Item</button> <ul id="list"></ul> </div>