Question

现在我正在尝试弄清楚如何将CREATED文本附加到CREATED p元素，具体取决于用户输入到输入文本字段的内容。如果我在createTextElement方法之后设置文本，当我单击按钮时它会显示正常。但我想要的是：用户在输入字段中输入文本，然后在单击按钮时，文本被添加到div标签的末尾，其ID为＆＃34; mydiv＆＃34;。任何帮助表示赞赏。

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;
}

Answer 1

您需要将参数应用于createTextNode function
您需要阅读输入字段的值，以便查看文本。

由于您将在每次点击时引用 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);
}

附加用户使用createTextNode方法

1 个答案: