javascript - Getting "Undefined" simple function with loop

So i can't seem to figure this out... The code essentially works, but i get an "undefined" prior to the function running..

var navRender = function indexNav(x,y) {

var mainNav = ["\/", "Inicio","\/abogados-criminales-los-angeles.html", "Defensa Criminal",
"\/delitos-de-drogas-abogados.html", "Delitos de Drogas",
"\/area-de-practica-abogados.html", "Areas de Practica",
"\/abogados-friendman-los-angeles.html", "Abogados Friedman",
"\/contactenos.html", "Contactenos"];

for (i = x; i <= y; i++) {
document.write("<li class=\"pure-menu-item pure-u-1-3\"><a class=\"pure-menu-link href=\"",mainNav[i]);
i++;
document.write("\">", mainNav[i] , "<\/a><\/li>");
};
};

document.getElementById("demo").innerHTML = navRender(0,5);

</script>

Also, i don't know why my "forward slashes are not working either.. i'm escaping with like " \/".. but they still get omitted..

Thanks for the help!

=> Remove **i++** from for loop.Because it is also plus in for loop.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


var navRender = function indexNav(x,y) {

var mainNav = ["\/", "Inicio","\/abogados-criminales-los-angeles.html", "Defensa Criminal",
"\/delitos-de-drogas-abogados.html", "Delitos de Drogas",
"\/area-de-practica-abogados.html", "Areas de Practica",
"\/abogados-friendman-los-angeles.html", "Abogados Friedman",
"\/contactenos.html", "Contactenos"];

for (i = x; i <= y; i++)
{
document.write("<li class=\"pure-menu-item pure-u-1-3\"><a class=\"pure-menu-link href=\"",mainNav[i]);
document.write("\">", mainNav[i] , "<\/a><\/li>");
};
};
navRender(0,5);


<!-- end snippet -->

Here is the right way of doing it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var navRender = function indexNav(x, y) {

var mainNav = ["\/", "Inicio", "\/abogados-criminales-los-angeles.html", "Defensa Criminal", "\/delitos-de-drogas-abogados.html", "Delitos de Drogas", "\/area-de-practica-abogados.html", "Areas de Practica", "\/abogados-friendman-los-angeles.html", "Abogados Friedman", "\/contactenos.html", "Contactenos"];

var html = "";

for (i = x; i <= y; i = i + 2) {
html = html + "<li class='pure-menu-item pure-u-1-3'><a class='pure-menu-link' href='" + mainNav[i] + "'>" + mainNav[i + 1] + "</a></li>";
};

return html;
};
document.getElementById("demo").innerHTML = navRender(0, 5);

<!-- language: lang-html -->

<div id="demo">
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var navRender = function indexNav(x,y) {

var mainNav = ["\/", "Inicio", "\/abogados-criminales-los-angeles.html", "Defensa Criminal", "\/delitos-de-drogas-abogados.html", "Delitos de Drogas", "\/area-de-practica-abogados.html", "Areas de Practica", "\/abogados-friendman-los-angeles.html", "Abogados Friedman", "\/contactenos.html", "Contactenos"];

var result = '';
for (var i = x; i <= y; i = i + 2) {
result += '<li class="pure-menu-item pure-u-1-3\">'
result += '<a class="pure-menu-link" href="' + mainNav[i] + '">' + mainNav[i + 1];
result += '</a>';
result += '</li>';
}

return result;
};
document.getElementById("demo").innerHTML = navRender(0,5);

<!-- language: lang-html -->

<ul id="demo"></ul>

<!-- end snippet -->