我可能过量使用了 innerHTML 并变得未定义答案

【问题标题】：I might've overdosed innerHTML and get undefined我可能过量使用了 innerHTML 并变得未定义
【发布时间】：2016-09-18 18:54:58
【问题描述】：

 function promptuj() {
   this.x = prompt("How big should be your multiplication table?");
   document.getElementById("keks").innerHTML = tabliczka(this.x);
 }

 function tabliczka() {
   document.getElementById("keks").innerHTML += "<table border=\"1\">";
   for (i = 1; i <= this.x; i++) {

     document.getElementById("keks").innerHTML += "<tr><td>" + i + "</td>";
     for (j = 1; j <= this.x; j++) {
       if (j != 1) {
         document.getElementById("keks").innerHTML += "<td>" + j * i + "</td>";
       }

     }
     document.getElementById("keks").innerHTML += "</tr>";
   }
   document.getElementById("keks").innerHTML += "</table>";
 }

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <meta charset="utf-8">
</head>

<body>
  <input type="button" onclick="promptuj()" value="Promptonto" />
  <div id="keks"></div>

</html>

这个简短的东西是用于带有提示按钮的乘法表，询问它应该有多大。但是给它任何数字会返回未定义而不是表。在此之前，我有 document.write(whatever) 而不是 document.getElementById("keks").innerHTML += 并且它有效。

编辑：我注意到我没有关闭 <body> 但它没有帮助。

【问题讨论】：

永远不要使用.innerHTML +=!!!
@Oriol 那我应该改用什么？ :|
@Andrew L. 我只是在函数之外定义了它，没关系。当我使用 document.write() 时，它没有定义它就可以工作。
您将this.x 传递给tabliczka() 函数，但您没有在该函数中使用参数
@Irevall：DOM 不是 HTML 字符串。给 DOM 添加结束标签是没有意义的。您可以添加整个元素，如果您希望采用这种方法，可以使用 .innerHTML 从有效的 HTML 结构中解析出来。

标签： javascript html

【解决方案1】：

因为在promptuj 中您将innerHTML 设置为tabliczka 返回的值，所以您会得到未定义。但是tabliczka 没有明确返回任何东西，所以它就像返回了undefined。

相反，tabliczka 应该返回要设置为 innerHTML 的 HTML 字符串。

此外，切勿使用.innerHTML +=。首先连接字符串，最后分配innerHTML。如果你使用.innerHTML = "<table>"，解析器会自动关闭表，无需等待你的.innerHTML += "</table>"。然后内容将被插入到表格之外。在这里不相关，但.innerHTML += 也会删除内部数据，例如事件监听器。

function promptuj() {
  var x = prompt("How big should be your multiplication table?");
  document.getElementById("keks").innerHTML = tabliczka(x);
}
function tabliczka(x) {
  var str = "<table>";
  for (var i=1; i<=x; i++) {
    str += "<tr>";
    for (var j=1; j<=x; j++) {
      str += "<td>" + j*i + "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";
  return str;
}

table {
  border-collapse: collapse;
}
td {
  text-align: center;
  border: 1px solid;
}

<input type="button" onclick="promptuj()" value="Promptonto" />
<div id="keks"></div>

【讨论】：

所以我确实过量使用了innerHTML？ :P
这是一个干净又不错的解决方案，但是.innerHTML += 部分真的是导致问题的原因吗？由于性能，这不是一个（非常）坏主意吗？
@PeterHerdenborg 好吧，有一些问题。结果未定义，因为tabliczka 没有返回任何内容。但是.innerHTML += 不仅对性能不利。如果你使用.innerHTML = "<table>"，解析器会自动关闭它，无需等待你的.innerHTML += "</table>"。然后内容将被插入到表格之外。在这里不相关，但.innerHTML += 也会删除内部数据，例如事件监听器。
是的，你清理了一些其他有问题的东西。现在我意识到我上面的评论没有经过深思熟虑，而且正如其他人在 cmets 中提到的那样，您不能将 HTML 的 sn-ps 写成 .innerHTML 就好像它是一个字符串一样。
@Oriol 您可以将您的评论添加到答案中，它为您的答案增加了很多价值

【解决方案2】：

尝试类似：

<script type="text/javascript">

        function promptuj() {
            window.x=prompt("How big should be your multiplication table?");
            document.getElementById("keks").innerHTML = tabliczka(window.x);
        }

        function tabliczka(x) {

            var htmlString = "";

            htmlString += "<table border=\"1\">";
            for (i=1; i<=window.x; i++) {

                htmlString  += "<tr><td>" + i + "</td>";
                for (j=1; j<= x; j++) {
                    if (j!=1) {
                    htmlString  += "<td>" + j*i + "</td>";
                    }

                }
                htmlString  += "</tr>";
            }
            htmlString  += "</table>";

           return htmlString;
        }



    </script>

你看到了 undefined，因为你的 tabliczka 函数最初什么也没返回，所以 javascript 从调用它时隐式返回 undefined（这就是 javascript 的工作原理）。

因此，基本上，即使 tabliczka 是正确的，它也会对您的“keks”div 进行 innerHTML 更改并返回，因此 promptuj 函数将最终的 .innerHTML 更改为“keks”，而 tabliczka 的结果是未定义的。

事情发生得如此之快，以至于你刚刚看到我所知道的未定义。

【讨论】：

所以 promptuj() 想要一些来自 tabliczka() 的字符串/值，但什么也没找到，因为 tabliczka() 只想向 HTML 添加东西？
我想 +1，因为对原始解决方案为何不起作用的分析似乎很准确，但是您保留了较差的 this.x 解决方案和不正确的函数参数方法，所以我我还没准备好支持这个:)
是的，这基本上是正确的。在 javascript 中，函数调用默认返回未定义，除非您明确返回某些内容。例如，如果我有函数 myFunction() { /*do nothing*/ }，当我使用 myFunction() 调用它时，我会得到未定义。而如果我有函数 myFunction { return 0; } ，当我调用它时，它将返回 0。在您的代码中，您正在执行以下操作： document.getElementById("keks").innerHTML = tabliczka(this.x);上面写着“将 tabliczka 返回的任何内容放在 div“keks”中”，但 tabliczka 返回未定义。这就是你看到 undefined 的原因。
@PeterHerdenborg，你是对的。为了更明确，我只是用 window.x 替换了 this.x。这确实是一个糟糕的解决方案。我只是没有改变一切来避免这种情况，因为我缺乏编写此代码的上下文，我想帮助 Irevall 了解最初的问题是什么，而不会使我的答案过于复杂。但是，是的，你是绝对正确的，我不会在生产环境中编写这样的代码。
@Peter Herdenborg：你能详细说明 this.x 和参数方法有什么问题吗？