javascript - Getting "Undefined" simple function with loop

Question

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!

Answer 1

Here is the right way of doing it.

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);

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