Count number of same <div> in html using javascript

Question

So I'm new in JS and I have to check how much documents the user has to let him add one or not, I can do it with PHP but I wanna learn some Javascript so that what I did, and when I'm storing the length of the parent variable it said that it's undefined, can someone tell whats is happening and thank you for the help.

window.alert = function(titre, message) {
    

    document.getElementById("alertPanel").innerHTML = "<span class=\"close\" onclick=\"closealert();\"></span><h2>" + titre + "</h2><div class=\"texte\">" + message + "</div>";
    document.getElementById('alertPanel').style.display='block';
    document.getElementById('overlay').style.display='block'; }




function HowMuchDocuments()
{
  console.log("work");
  var parent = document.getElementsByClassName("created-item");
  var itemCount= parent.length;
  console.log(parent);
  console.log(itemCount);
  
  if(itemCount == 4 )
  {
    console.log('work fine');
    alert('Maximum Documents Reached','Please Delete Some Documents you cant go more then 5 documents');

  }


  else
{
    console.log('redirect fine');
    console.log(parent.length);
    //window.location.href="mypage.php";
    
}


}


function closealert()
{
    document.getElementById('alertPanel').style.display='none';
    document.getElementById('overlay').style.display='none';
}

alert #overlay{
  position:fixed;
  z-index:999;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#000;
  opacity:0.7;
  display: none;
}
alert #alertPanel{
  position:absolute;
  top:25%;
  min-height: 170px;
  width: 450px;
  margin-left: 24%;
  z-index:9999;
  color:#000;
  border:1px solid #303030;
  background-color:#eaeaea;
  display: none;
  text-align: center;
  font-size: 24px;
  font-weight:100%;
  margin-bottom: 20px;
}
alert div.texte{
  width: 400px;
  display:inline-block;
  padding:20px 0px 10px 0px;
  word-wrap: break-word;
}
alert span.close{
  background: url('data:image/png;base64,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') no-repeat center center;
  cursor:pointer;
  height:32px;
  width:32px;
  position:absolute;
  right:12px;
  top:12px;
  cursor:pointer;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  opacity:1.0;
}

alert #alertPanel h2{
  font-weight:100%;
  font-size:22px;
  padding:25px 0px 15px 15px;
  text-align:center;
  text-shadow:1px 1px 1px #000;
  margin:0px;
  background-color: #323232;
  border:2px solid #fff;
  -moz-box-shadow:0px 0px 8px #000;
  -webkit-box-shadow:0px 0px 8px #000;
  box-shadow:0px 0px 8px #000;
  color: #FFFFFF;
}

<alert>
         <div id="overlay" ></div>
         <div id="alertPanel" ></div>
</alert>                       
 
<div> 
   <button class="" id="addDoc" onclick="HowMuchDocuments();"> 
    Add Document
   </button>  
</div> 

 <div class="created-item">yow</div>
  <div class="created-item">yow</div>
   <div class="created-item">yow</div>
    <div class="created-item">yow</div>

Answer 1

I think you wrote length wrong