使用 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
]; 

然后我用它在谷歌地图上放置点。

然后我创建了一个函数来构建将进入谷歌地图弹出气泡的 html 代码：

//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 (in promise) RangeError: Invalid string length

问题出在这一行：seekAdventureHTML = seekAdventureHTML + '<a href="' + hike.seekAdventure[i+1] + '">';

我认为它可能无法在下一行抓取 i 之前抓取 i+1，但我将两者都交换了，但仍然无法正常工作。有什么想法吗？

Answer 1

这里看起来像是一个错字：

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

我假设您的意思是 i++（或者可能是 i+=2），而不是 i+2。 i 的值永远不会改变，循环是无限的并不断添加到字符串 - 脚本只是用完了 RAM。