javascript - 使用 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 map 弹出气泡的 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。