Javascript Pushing to an Array crashes browser [closed]

Good day. I have been trying to improve my navigation application, but I am new to Javascript. With your help I have managed to get take the coordiantes I have from the algorithm and input them on the map. Now I have been trying to make the browser receive the data from the user as follows:

The user clicks once on the map to pinpoint the starting point, which is then displayed to him and stored in the variable startPoint. When the user clicks twice, the endPoint is set. When he clicks a third time, all his data is cleared.

However I have hit a road block. Both Chrome and Firefox freeze and then crashed the tab when my code tries to push the marker into an array. I cannot understand where the error could be, and I have not managed to replicate this error in any other test I've run on simpler programs. What is making it worse is that running this like in a Java program causes no errors, and works properly, so I assume I have an error in my syntax. Here is the code:

 var map = L.map('map').setView([37.92,23.69], 13);
 var nodeArray=new Array();
 var markerArray = new Array();
 var startPoint=null;
 var endPoint=null;

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

    var popup = L.popup();
    var road = L.polyline(nodeArray).addTo(map);

   function onMapClick(e) {
     var markerCounter=markerArray.length;
     console.log("pfff"+e.latlng);
     if (markerCounter==2){
        console.log("NO>"+markerArray.length);
        popup.setLatLng(e.latlng).setContent("Your navigation data has been cleared.").openOn(map);
        map.removeLayer(markerArray[0]);
        map.removeLayer(markerArray[1]);
        markerArray=new Array();
        endPoint=null;
        startPoint=null;
      }else{
        var marker = new L.Marker(e.latlng, {draggable:false});
        if (markerCounter==1){
        console.log("YES1>"+markerArray.length);
        popup.setLatLng(e.latlng).setContent("Your destination is:" + e.latlng.toString()).openOn(map);
        endPoint=(e.latlng);
        markerCounter++;
        }
        if (markerCounter==0){
        console.log("YES2>"+markerArray.length);
        popup.setLatLng(e.latlng).setContent("Your starting point is: " + e.latlng.toString()).openOn(map);
        startPoint=(e.latlng);
        markerCounter++;
        }           
        for (var i=0;i<=markerArray.length;i++){
        markerArray.push(marker);
        map.addLayer(marker);
            }   

        }
        console.log("E>"+endPoint);
        console.log("S>"+startPoint);
    }
     map.on('click', onMapClick);

After some search on this site I found this:

Leaflet - How to find existing markers, and delete markers?

and precisely this piece of code:

/*create array:*/
var marker = new Array();

/*Some Coordinates (here simulating somehow json string)*/
var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}];

/*pushing items into array each by each and then add markers*/
function itemWrap() {
for(i=0;i<items.length;i++){
    var LamMarker = new L.marker([items[i].lat, items[i].lon]);
    marker.push(LamMarker);
    map.addLayer(marker[i]);
    }
}

/*Going through these marker-items again removing them*/
function markerDelAgain() {
for(i=0;i<marker.length;i++) {
    map.removeLayer(marker[i]);
    }  
}    

I ran this piece of code as above exactly, and it still crashed both Chrome and Firefox, while not helping me understand where I am wrong. Does anyone have any idea what could cause such a crash?

I should also add that the last piece of code was not run inside my page, but on a separate page with the bare minimum. It shouldn't be a leaflet issue as no problems occur if I comment out the Array push parts.

Forgot also to add that this function is defined after the variables in the header part of the html.

and here as requested the simpler page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">


</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<link rel="stylesheet" href="includes/style.css" type="text/css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
</head>

<body>

<div class="container">
  <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a> 
  </div>

  <div class="content">
    <h1>MAP</h1>
     <div id="map">
     <iframe id="frmFile" src="wayNodes.txt" onload="LoadFile();" style="display: none;"></iframe>

<script type="text/javascript">
var marker = new Array();


var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}];


    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);
function itemWrap() {
for(i=0;i<items.length;i++){
    var LamMarker = new L.marker([items[i].lat, items[i].lon]);
    marker.push(LamMarker);
    map.addLayer(marker[i]);
    }
}

/*Going through these marker-items again removing them*/
function markerDelAgain() {
for(i=0;i<marker.length;i++) {
    map.removeLayer(marker[i]);
    }  
}    

     </script>
     </div>

     </div>




    </div>
  <div class="sidebar2">
   </div>
  <div class="footer">
  </div>
</div>
</body>
</html>