代码之家 › 专栏 › 技术社区 › SoLoGHoST

创建元素和insertBefore不起作用

createelement javascript php

2

SoLoGHoST · 技术社区 · 16 年前

好吧,我的头一直撞在墙上,我不知道为什么它没有创建元素。可能是我忽略了一些很小的东西。基本上,这个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从来没有被创建过,我不明白为什么?此外,firebug告诉我变量divname是未定义的,尽管我试图在函数中处理这个问题,但不确定原因。

无论如何,我需要在下面的html之前插入创建的div元素:

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

我在这里使用name而不是id,因为我不需要重复的id值,这就是为什么我要更改name值并递增,因为这个函数可能被调用超过1次。例如,如果同一页上有3个shoutboxes(不要问为什么…lol),我需要跳过已经更改为“dp_reserved_counted”的其他名称,我相信我做得对。无论如何,如果可以的话,我会把这个放在头文件中,只调用一次,但是这是不可能的,因为这些文件是加载的,而且无法判断它们是哪个,所以它直接硬编码到HTML中shoutbox所在页面的实际输出中。基本上,不确定这是不是问题所在,但必须有某种解决方法,除非问题在我上面的代码中…阿尔格

请帮帮我。我真正需要的是对这件事的第二套看法。谢谢)

3 回复 | 直到 11 年前

1

0

Tracker1 16 年前

loadshouts方法有很多问题。首先是字符串“未定义”的比较,而不是将匹配的直接布尔检查。我还删除了一些不需要的逻辑。除此之外,被分配给新肩的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;
  }
}

2

Casey Chu 16 年前

当你在测试的时候 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时,它试图调用一个不存在的值的indexof属性,因此抛出一个错误。

3

0

Chris Martin 11 年前

好吧,只是想让你知道事情的经过。我非常感谢你和凯西·霍普。特别是跟踪功能的出色重写。你们都很摇滚。这是我使用的最后一个函数,只是对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>';

再次感谢,你是最棒的!