Question

H~我有一个我一直在努力的剧本，最终将展示Pascal的三角形。我用JavaScript开发了这个，我想在DOM中显示它。

对于我的生活，我无法弄清楚为什么这个脚本在DOM中产生的效果与在控制台中产生的效果不同。任何帮助将不胜感激！

＆＃13;

 
 Copyright (c) 2015 Peter Gray Ward

 function randomScripts(){

          var arr1 = ['_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_'];
          var arr2 = ['_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_'];
          var n = 0;
          var len = 35;
          var mid = Math.floor(len/2)
          var destination = document.getElementById("destination");
          var home = document.getElementById("home");

          function first(){

            for(var j = 1; j<=10; j++){
              var o = j%2 !== 0;
              var e = j%2 === 0

            if(o){
              for(var i = 0; i<len; i++){
                odd = i%2 !== 0;
                if(j === 1){
                  arr1.splice(i,1,"_")
                }
                if(odd && (i === mid + n || i === mid - n)){
                  arr1.splice(i,1,1);
                }
                var node = document.createTextNode(arr1.join(''));
              }

              console.log(arr1.join(''));
              destination.appendChild(node);
              home.appendChild(node);
              //destination.appendChild("Please see Console for full version b/c of hackers");
            }

            else if(e){
              for(var h = 0; h<len; h++){
                even = h%2 === 0;
                if(even && (h === mid + n || h === mid - n)){
                  arr2.splice(h,1,n);
                }
              }
              console.log(arr2.join(''));
            }

            n++;

            }


          }

＆＃13;

 <p id="destination"></p>

＆＃13;

Answer 1

您创建了函数，但您从未调用它们。尝试实际调用它们以查看它们的作用：

function randomScripts(){

  var arr1 = ['_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_'];
  var arr2 = ['_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_','_'];
  var n = 0;
  var len = 35;
  var mid = Math.floor(len/2)
  var destination = document.getElementById("destination");
  var home = document.getElementById("home");

  first();

  function first(){

    for(var j = 1; j<=10; j++){
      var o = j%2 !== 0;
      var e = j%2 === 0

    if(o){
      for(var i = 0; i<len; i++){
        odd = i%2 !== 0;
        if(j === 1){
          arr1.splice(i,1,"_")
        }
        if(odd && (i === mid + n || i === mid - n)){
          arr1.splice(i,1,1);
        }

        var node = document.createElement('p');
        node.textContent = arr1.join('');
      }

      console.log(arr1.join(''));
      destination.appendChild(node);
      home.appendChild(node);
      destination.innerHTML = "Please see Console for full version b/c of hackers";
    }

    else if(e){
      for(var h = 0; h<len; h++){
        even = h%2 === 0;
        if(even && (h === mid + n || h === mid - n)){
          arr2.splice(h,1,n);
        }
      }
      console.log(arr2.join(''));
    }

    n++;

    }


  }
}
  
window.addEventListener('load', randomScripts, false);

<p id="destination"></p>
<div id="home"></div>

Answer 2

脚本中可能还有其他问题，但这里有一些我注意到的问题。第一：

destination.appendChild(node);
home.appendChild(node);

您无法在DOM中的两个不同位置附加相同的节点。当你第二次追加它时它会删除第一个。您可以像创建第一个文本节点一样创建第二个文本节点，也可以克隆节点。

此外，这两行代码位于if(o)语句正文之后，但node变量在中创建，如果是正文。在一般情况下，您不会期望这始终有效，因为node如果if主体未被执行则为undefined。在您的特定代码中，由于o是true第一次通过循环，因此不会发生这种情况。但node仅在每次循环中更新。这就是你想要的吗？

最后一点，缩进不一致，很难看出嵌套在什么内部。使用正确且一致的缩进很重要。（我会建议使用4个空格而不是2个空格，以便人们更容易阅读。）

为什么`appendChild（）`给我提问？

2 个答案: