Cuando escribo algo en el indicador, me subestiman. Cuando escribo algo en el indicador, quiero que se agregue a la lista como un nuevo elemento de lista. Por ejemplo, si escribo "Comida" en el aviso, quiero que diga "Comida" en la segunda línea. Ahora agrega un nuevo elemento de lista pero está vacío. Aquí está mi código:
var items = document.querySelector('items'); function addItemToList() { var newItem = prompt("Add item to list"); if (newItem != null) { var ul = document.querySelector('ul'); var li = document.createElement('li'); ul.appendChild(li); li.innerHTML = li.value; } } <ul id="items"> <li>Drinks</li> </ul> <input class="buttom-add" type="button" id="btnAdd" value="Add Item" onclick="addItemToList()">Está configurando el HTML interno de li recién innerHTML a su propiedad de value (que es 0) en lugar del valor devuelto por prompt .
En su lugar, asigne newItem a la propiedad innerHTML de li :
var items = document.querySelector('items'); function addItemToList() { var newItem = prompt("Add item to list"); if (newItem != null) { var ul = document.querySelector('ul'); var li = document.createElement('li'); ul.appendChild(li); li.innerHTML = newItem; } } <ul id="items"> <li>Drinks</li> </ul> <input class="buttom-add" type="button" id="btnAdd" value="Add Item" onclick="addItemToList()">Solo necesita cambiar la última línea con li.innerHTML = newItem; para que asigne el elemento leído desde el aviso.
var items = document.querySelector('items'); function addItemToList() { var newItem = prompt("Add item to list"); if (newItem != null) { var ul = document.querySelector('ul'); var li = document.createElement('li'); ul.appendChild(li); li.innerHTML = newItem; } } <ul id="items"> <li>Drinks</li> </ul> <input class="buttom-add" type="button" id="btnAdd" value="Add Item" onclick="addItemToList()">