gpt4 book ai didi

javascript - 使用 createTextNode 方法附加用户输入的文本

转载 作者:行者123 更新时间:2023-12-01 02:44:02 24 4
gpt4 key购买 nike

现在我正在尝试弄清楚如何根据用户在输入文本字段中输入的内容将 CREATED 文本附加到 CREATED p 元素。如果我在 createTextElement 方法之后设置文本,则当我单击按钮时它会显示得很好。但我想要的是:用户在输入字段中输入文本,然后单击按钮后,文本将添加到 ID 为“mydiv”的 div 标记的末尾。如有任何帮助,我们将不胜感激。

HTML:

<body>
<div id="mydiv">
<p>Hi There</p>
<p>How are you?</p>
<p>
<input type="text" id="myresponse">
<br>
<input type="button" id="showresponse" value="Show Response">
</p>
<hr>
</div>
</body>

JavaScript:

var $ = function(id) {
return document.getElementById(id)
}

var feelings = function()
{
$("myresponse").focus();

var mypara = document.createElement("p");
var myparent = $("mydiv");

myparent.appendChild(mypara);

var myText = document.createTextNode($("myresponse").value);

mypara.setAttribute("id", "displayedresponse");

mypara.appendChild(myText);

$("displayedresponse").appendChild(myText);
}

window.onload = function() {

$("showresponse").onclick = feelings;
}

最佳答案

  1. 您需要向 createTextNode 函数应用一个参数
  2. 您需要读取输入字段的值才能看到文本。
  3. 由于您将在每次点击时引用 mydiv,因此我认为将 mydiv 变量移至父范围会更适合您

    var $ = function (id) {
    return document.getElementById(id)
    }
    let mydiv = $('mydiv');
    $("showresponse").addEventListener('click', feelings);

    function feelings() {
    let textInput = $('myresponse').value;
    var mypara = document.createElement("p");
    var myText = document.createTextNode(textInput);
    mypara.setAttribute("id", "displayedresponse");
    mypara.appendChild(myText);
    mydiv.appendChild(mypara);
    $("displayedresponse").appendChild(myText);
    }

关于javascript - 使用 createTextNode 方法附加用户输入的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47382335/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com