使用 JavaScript 附加 HTML 输入会给出“未定义”值答案

【问题标题】：Appending HTML inputs using JavaScript gives "undefined" value使用 JavaScript 附加 HTML 输入会给出“未定义”值
【发布时间】：2019-08-22 15:58:03
【问题描述】：

我有一段小代码尝试使用 HTML 输入将值附加到同一个文档。

<h2 id="myh"> Header</h2>
<input type="text" id="text">
<button onclick="func()">Append</button>
<script type="text/javascript">
  var child = document.getElementById("text").value;

  function func() {
    var h = document.getElementById('myh');
    h.insertAdjacentHTML('afterend', '<p> New Para' + toString(child) + '</p>');
  }
</script>

变量child不从输入中获取文本值，输出为`undefined'

图片 1：输入Test

图 2：点击了按钮

如何从输入中获取值作为 New ParaTest？

使用答案编辑的代码。

【问题讨论】：

标签： javascript append insertadjacenthtml

【解决方案1】：

你不需要toString() 方法，删除它。

获取child变量中元素的引用，得到valuefunc()

var child = document.getElementById("text");

function func() {
  var h = document.getElementById('myh');
  h.insertAdjacentHTML('afterend', '<p> New Para: ' + child.value + '</p>');
}

<h2 id="myh"> Header</h2>
<input type="text" id="text">
<button onclick="func()">Append</button>

【讨论】：

【解决方案2】：

child 变量需要在 func 函数内部赋值，不需要toString() 试试这个

function func(){
   var h = document.getElementById('myh');
   let child = document.getElementById("text").value;
   h.insertAdjacentHTML('afterend','<p> New Para' + child + '</p>');
}

<html>
<body>
    <h2 id="myh"> Header</h2>
    <input type="text" id="text">
    <button onclick="func()">Append</button>
</body>
</html>

【讨论】：

【解决方案3】：

你的变量应该是全局的。尝试将其放入函数中，然后检查它。

    function func(){
        var child = document.getElementById("text").value;
        var h = document.getElementById('myh');
        h.insertAdjacentHTML('afterend','<p> New Para' + toString(child) + '</p>');
    }

【讨论】：