javascript - 使用 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不从输入中获取文本值，其输出为“未定义”

图一：打字Test

图 2：单击按钮

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

使用答案编辑的代码。

score 1 · Accepted Answer

你不需要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>

score 1 · Accepted Answer

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>

score 1 · Accepted Answer

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

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

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

使用答案编辑的代码。

3 回答 3

Related

Reference