Estaba haciendo una lista de tareas pendientes y no podía averiguar cómo puedo limitar el número de creación de li. Quiero evitar que cree li cuando llegue a 4 li al no mostrarlo en ul y dejar de enviarlo. Este es el que escribí. Si alguien me puede dar consejos o ideas sobre cómo resolver esto. Gracias.
const form = document.querySelector('form') const input = document.querySelector('input') const memo = document.querySelector('ul') form.addEventListener('submit', function(e) { const line = document.ul.child if (line > 5) { e.preventDefault() ToDo() input.value = "" } }) function ToDo() { if (input.value == '') { alert('please write') } else { const value = input.value const newList = document.createElement('li') newList.textContent = value memo.append(newList) const deleteBtn = document.createElement('button') newList.append(' ', ' ', deleteBtn) deleteBtn.textContent = "DELETE" console.log(newList) } } memo.addEventListener('click', function(e) { if (e.target.nodeName === 'BUTTON') { e.target.closest('LI').remove(); } })código completo: aquí
Esta línea const line = document.ul.child daría un error, ya que no es una forma válida de consultar cosas desde el DOM. Además e.preventDefault() no debería estar en el bloque if incluso si fuera correcto. Esto funcionaría:
const form = document.querySelector("form"); const input = document.querySelector("input"); const memo = document.querySelector("ul"); form.addEventListener("submit", function (e) { e.preventDefault(); const liNumber = document.querySelectorAll("ul li").length; if (liNumber < 4) { ToDo(); input.value = ""; } else { alert("Maximum number reached"); } }); function ToDo() { if (input.value == "") { alert("please write"); } else { const value = input.value; const newList = document.createElement("li"); newList.textContent = value; memo.append(newList); const deleteBtn = document.createElement("button"); newList.append(" ", " ", deleteBtn); deleteBtn.textContent = "DELETE"; } } memo.addEventListener("click", function (e) { if (e.target.nodeName === "BUTTON") { e.target.closest("LI").remove(); } }); body { background-image: linear-gradient( 83.2deg, rgba(150, 93, 233, 1) 10.8%, rgba(99, 88, 238, 1) 94.3% ); } h1 { text-align: center; font-size: 50px; font-weight: 500; font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; color: #fbfbf2; } .option { margin-top: 4rem; display: flex; justify-content: center; align-content: center; flex-direction: row-reverse; } #input { width: 400px; height: 60px; border-radius: 10px; box-shadow: none; font-size: 20px; } #submit { margin-right: 5px; padding: 10px 10px; border-radius: 10px; background-color: #5a189a; color: #fbfbf2; } #input, #submit { padding: 10px 10px; border: none; } .lists { background-color: #efd9ce; height: 400px; border-radius: 15px; } .memo { padding: 15px; font-size: 30px; } ul li { margin: 20px; } button { background-color: #5a189a; border-radius: 15px; color: #fbfbf2; font-size: 20px; } <form> <h1>TO DO LIST</h1> <div class="option"> <input type="text" id="input" placeholder="enter a task" /> <button type="submit" id="submit">SUBMIT</button> </div> </form> <div class="lists"> <ul class="memo"></ul> </div>