How do I limit creating LI

Question

0.00/5 (No votes)

See more:

Hello,

I was making a to-do list and I couldn't figure out how can I limit the number of creating li. I want to stop it from creating li when it reaches 4 li by not showing it on ul and stop submitting it. Please give some ideas or advice on how to solve this one. Thank you

whole code: https://codepen.io/jujuju12/pen/MWrojJZ[^]

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style>
            body{
    background-image: linear-gradient( 83.2deg,  rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% );;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 90vh; 
}
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;
    width: 850px;
    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; 
 
    
}
        </style>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
    <head></head>
    <body>
        
        <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>
        
        <div class="lists">
            <ul class= "memo">
      
            </ul>
        </div>
        
       </form>
        
      
    </body>
</html>

What I have tried:

I was making a to-do list and I couldn't figure out how can I limit the number of creating li.

<script>
      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();
        }
        })


      </script>

Posted 28-Mar-22 13:45pm

Member 15332881

Updated 28-Mar-22 22:18pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2022-03-28T22:18:00

The logic you've put in place to check the HTML elements is wrong, and the code won't even run, as described below:

JavaScript

//   document.ul is not a valid selector, you already
// v have the 'memo' element selected, so why use this?
const line = document.ul.child

//   This logic doesn't make sense, you're trying to say here
// v if the number of children is MORE than 5 then add more?
if(line > 5){
  e.preventDefault()
  ToDo()
  input.value = ""
}

Instead you need to use proper logic:

JavaScript

// Call preventDefault() immediately to ensure no form submit
e.preventDefault();

// Get the children of the list using the 'memo' variable
const children = memo.children;

// If the number of children is LESS than 4 then allow the append
if (children.length < 4) {
  ToDo();
  input.value = '';
}