创建一个元素和插入不起作用

Question

好的，我一直在这堵墙上撞到墙上，我不知道为什么它没有创建元素。也许我在这里忽略了很小的东西。基本上，有此JavaScript代码正在输出的PHP文档中，例如在加载页面时中间的某个地方，不幸的是，它无法进入标题。尽管我不确定这是问题所在，但也许是……嗯。

// Setting the variables needed to be set.
    echo '
        <script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/shoutbox.js"></script>';
    echo '
        <script type="text/javascript">
            var refreshRate = ', $params['refresh_rate'], ';
            createEventListener(window);
            window.addEventListener("load", loadShouts, false);

            function loadShouts()
            {
                var alldivs = document.getElementsByTagName(\'div\');
                var shoutCount = 0;
                var divName = "undefined";

                for (var i = 0; i<alldivs.length; i++)
                {
                    var is_counted = 0;
                    divName = alldivs[i].getAttribute(\'name\');

                    if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0)
                        continue;
                    else if(divName == "undefined") 
                        continue;
                    else
                    {
                        if (divName.indexOf(\'dp_Reserved_Counted\') == 0)
                        {
                            is_counted = 0;
                            shoutCount++;
                            continue;
                        }
                        else
                        {
                            shoutCount++;
                            is_counted = 1;
                        }
                    }

                    // Empty out the name attr.
                    alldivs[i].name = \'dp_Reserved_Counted\';

                    var shoutId = \'shoutbox_area\' + shoutCount;

                    // Build the div to be inserted.
                    var shoutHolder = document.createElement(\'div\');
                    shoutHolder.setAttribute(\'id\', [shoutId]);
                    shoutHolder.setAttribute(\'class\', \'dp_control_flow\');
                    shoutHolder.style.cssText = \'padding-right: 6px;\';
                    alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]);

                    if (is_counted == 1)
                    {
                        startShouts(refreshRate, shoutId);
                        break;
                    }
                }
            }

        </script>';

另外，我确定我在这些功能中链接到的其他功能正常。这里的问题是，在此功能中，DIV根本不会创建，我不明白为什么？此外，Firefox，Firebug告诉我，即使我试图在功能中照顾它，但可变的Divname是不确定的，尽管不确定为什么。

无论如何，我需要在以下HTML之前插入创建的DIV元素：

echo '
            <div name="dp_Reserved_Shoutbox" style="padding-bottom: 9px;"></div>';

我在这里使用名称而不是ID，因为我不需要重复的ID值，这就是为什么要更改名称值和增量的原因，因为此功能可以称为1次以上。例如，如果同一页面上有3个喊叫箱（不要问为什么...大声笑），我需要跳过我已经更改为“ dp_resverd_counted”的其他名称，我相信我做得正确。无论如何，如果可以的话，我会将其放入标题中，然后将其调用一次，但这是不可能的，因为它们已被加载，无法分辨它们是哪一个，因此直接将其直接编码到实际的输出在html内的喊声箱的页面上。基本上，不确定这是否是问题，但是必须有某种工作，除非上面的问题在我的代码中... ARRG

请帮我。真的，我需要第二张眼睛。谢谢 ：）

Answer 1

LoadShout方法中有许多问题。首先是将“未定义”的字符串比较，而不是直接布尔检查，该检查将匹配。我还删除了一堆不需要的逻辑。除此之外，被分配给新的Shoutholder的ID属性是作为数组传递的，而不是直接的属性分配。

function loadShouts()
{
  var alldivs = document.getElementsByTagName("div");
  var shoutCount = 0;
  var divName = "undefined";

  for (var i = 0; i<alldivs.length; i++)
  {
    divName = alldivs[i].getAttribute("name");

    if (!divName)
      continue;
    if (divName.indexOf("dp_Reserved_Shoutbox") < 0 && divName.indexOf("dp_Reserved_Counted") < 0)
      continue;

    shoutCount++;    
    if (divName.indexOf("dp_Reserved_Counted") == 0)
      continue;

    // Empty out the name attr.
    alldivs[i].setAttribute("name", "dp_Reserved_Counted");

    var shoutId = "shoutbox_area" + shoutCount;

    // Build the div to be inserted.
    var shoutHolder = document.createElement("div");
    shoutHolder.setAttribute("id", shoutId);
    shoutHolder.setAttribute("class", "dp_control_flow");
    shoutHolder.style.cssText = "padding-right: 6px;";
    alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]);

    startShouts(refreshRate, shoutId);
    break;
  }
}

Answer 2

测试时 divName, ，从中切换条件的顺序

                divName = alldivs[i].getAttribute(\'name\');

                if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0)
                    continue;
                else if(divName == "undefined") 
                    continue;

为此：

                var divName = alldivs[i].getAttribute(\'name\');
                if (!divName) // this is sufficient, by the way
                    continue;
                else if (divName.indexOf(\'dp_Reserved_Shoutbox\') < 0 && divName.indexOf(\'dp_Reserved_Counted\') < 0)
                    continue;

问题在于，当脚本找到没有名称的DIV时，它试图调用不存在的值的索引属性，因此会引发错误。

Answer 3

好的，只是想让您知道它的发展。我非常感谢您的Tracker1和Casey Hope。特别是跟踪器，以实现函数的出色重写。你们都摇滚。这是我正在使用Bytheway的最终功能，只是对Tracker1的答案的一小部分编辑，这就是为什么您将我的投票放下来！

echo '
    <script type="text/javascript">
        var refreshRate = ' . $params['refresh_rate'] . ';
        createEventListener(window);
        window.addEventListener("load", loadShouts, false);

        function loadShouts()
        {
          var alldivs = document.getElementsByTagName("div");
          var shoutCount = 0;
          var divName = "undefined";

          for (var i = 0; i<alldivs.length; i++)
          {
            divName = alldivs[i].getAttribute("name");

            if (!divName)
              continue;
            if (divName.indexOf("dp_Reserved_Shoutbox") < 0 && divName.indexOf("dp_Reserved_Counted") < 0)
              continue;

            shoutCount++;    
            if (divName.indexOf("dp_Reserved_Counted") == 0)
              continue;

            // Empty out the name attr.
            alldivs[i].setAttribute("name", "dp_Reserved_Counted");

            var shoutId = "shoutbox_area" + shoutCount;

            // Build the div to be inserted.
            var shoutHolder = document.createElement("div");
            shoutHolder.setAttribute("id", shoutId);
            shoutHolder.setAttribute("class", "dp_control_flow");
            shoutHolder.style.cssText = "padding-right: 6px;";
            alldivs[i].parentNode.insertBefore(shoutHolder, alldivs[i]);

            startShouts(refreshRate, shoutId);
            break;
          }
        }

    </script>';

再次感谢，您是最好的！