Недопустимая длина строки при использовании объектов и функций Javascript

Question

Я пытаюсь создать функцию, в которую можно помещать объекты JavaScript, чтобы не использовать снова и снова HTML-код снова и снова.

У меня есть два объекта, которые выглядят так:

var TannerTrailGrandCanyon = {
  name: "Tanner Trail Grand Canyon",
  lat: 36.0326,
  long: -111.8525,
  type: "backpacking", 
  //Title then link
  seekAdventure: ['22 Hours of Driving, 1.5 Days of Snowshoeing, Yosemite National Park!','https://www.seekadventure.net/d/79-22-hours-of-driving-1-5-days-of-snowshoeing-yosemite-nationa'],
  blogs: []
};

var BadgerPass = {
  name: "Badger Pass - Yosemite",
  lat: 36.0326,
  long: -111.8525,
  type: "backpacking", 
  //Title then link
  seekAdventure: ['22 Hours of Driving, 1.5 Days of Snowshoeing, Yosemite National Park!','https://www.seekadventure.net/d/79-22-hours-of-driving-1-5-days-of-snowshoeing-yosemite-nationa'],
  blogs: ['Snowshoeing to Dewey Point in Yosemite - Socal Hiker','https://socalhiker.net/snowshoeing-to-dewey-point-in-yosemite/']
};

И затем они помещаются в массив:

markers1 = [
  TannerTrailGrandCanyon,
  BadgerPass
]; 

, который я затем использую для наложения точеккарта Google.

Затем я создал функцию для создания html-кода, который должен был появиться во всплывающем пузыре Google Map:

//put pop up bubble html together 
function BuildBubbleHTML(hike){
    html = "";
    html = html +'<h3>'  + hike.hikename + '</h3>';

    //If Seek Adventure Links Exist
    if(hike.seekAdventure.length > 0){
        seekAdventureHTML = '<p>Seek Adventure Links</p>';
        seekAdventureHTML = seekAdventureHTML + '<ul>'
        var i;
        for (i = 0; i < hike.seekAdventure.length; i+2) { 
            seekAdventureHTML = seekAdventureHTML + '<li>';
            seekAdventureHTML = seekAdventureHTML + '<a href="' + hike.seekAdventure[i+1] + '">';
            seekAdventureHTML = seekAdventureHTML + hike.seekAdventure[i] + '</a></li>';
        } 
        seekAdventureHTML = seekAdventureHTML + '</ul>';
        html = html + seekAdventureHTML;
    }

    //If Blog Links Exist
    if(hike.blogs.length > 0){
        blogHTML = '<p>Blog Links</p>';
        blogHTML = blogHTML + '<ul>'
        var i;
        for (i = 0; i < hike.blogs.length; i+2) { 
            blogHTML = blogHTML + '<li>';
            blogHTML = blogHTML + '<a href="' + hike.blogs[i+1] + '">';
            blogHTML = blogHTML + hike.blogs[i] + '</a></li>';
        } 
        blogHTML = blogHTML + '</ul>';
        html = html + blogHTML;
    }


    return html;
};

Когда я выполняю код, я получаю эту ошибку:

mapCode.js: 250 Uncaught (в обещании) RangeError: Неверная длина строки

Проблема в этой строке: seekAdventureHTML = seekAdventureHTML + '<a href="' + hike.seekAdventure[i+1] + '">';

Я подумал, что, возможно, это не моглоЯ взял i + 1 до того, как в следующей строке схватил i, но я поменял оба, но это все равно не сработало.Есть идеи?

Answer 1

Похоже, здесь опечатка:

        for (i = 0; i < hike.seekAdventure.length; i+2) {

Я предполагаю, что вы имели в виду i++ (или, возможно, i+=2), а не i+2. Значение i никогда не меняется, цикл бесконечен и продолжает добавляться к строке - сценарию просто не хватает оперативной памяти.