使用JavaScript附加HTML输入会产生“未定义”的值

Question

我有一个小代码，试图将使用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不会从输入中获取文本值，该文本值输出为“未定义”

图片1：键入Test

图片2：点击了按钮

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

使用答案编辑的代码。

Answer 1

您的变量应为全局变量。尝试将其放入函数中，然后进行检查。

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

Answer 2

您不需要toString()方法，将其删除。

获取child变量中元素的引用，并获取value func()

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>

Answer 3

maxPartSize变量需要在func函数内部分配，不需要child 试试这个

toString()

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