Question

我试图获取用户在表单文本框中输入的数据，以便通过javascript生成。表格代码是：`表格名称=＆＃34;访客评论＆＃34;方法=＆＃34;获得＆＃34; onsubmit =＆＃34;返回FormValidation（）＆＃34;＆gt;

        <div style="margin-left:30%; margin-right:30%">
            <fieldset>
            <legend><b>New Comment</b></legend>
            <br><br>

            Name: &#160;&#160;&#160;&#160;&#160; <input type="text" id="name" name="name"><br><br>
            Comment: &#160;&#160; <input type="text" id="comment" name="comment" Style="height:200px;width:400px" ><br><br>


            <input type="button" name="submit" value="Submit Comment" onclick="Add()"/>
        </div>
    </form>`

当我使用下面的功能时，它可以工作，但它剪切/粘贴文本框。因此，文本框将从注释提交按钮上方的位置丢失，现在将在页面下方。

<script type="text/javascript">
        function Add(){
            var newParagraph = document.createElement("P");
            var name = document.getElementById("name");
            newParagraph.appendChild(name);
            var comment = document.getElementById("comment");
            newParagraph.appendChild(comment);
            document.body.appendChild(newParagraph);
        }
        </script>

所以我试过了：

<script type="text/javascript">
        function Add(){
            var newParagraph = document.createElement("P");
            var name = document.getElementById("name").value;
            newParagraph.appendChild(name);
            var comment = document.getElementById("comment").value;
            newParagraph.appendChild(comment);
            document.body.appendChild(newParagraph);
        }
        </script>

但它什么都没做。当我点击提交没有任何反应。

这是漫长的几天，我错过了什么？

我还不了解Jquery，而且我没有时间在这一瞬间学习它。

编辑：例如，如果用户输入：名称：[Rachel]评论：[我们在您的机构中度过了最美好的时光]并点击提交，然后出现 _______________________________________________________________ Rachel我们拥有最多你工作的美好时光！ ________________________________________________________________ （好吧，我不知道为什么评论没有显示我输入的方式我输入的方式但是应该隔离用户名，然后是a
然后用户评论） -

Answer 1

首先，parent.appendChild(node)将DOM节点作为参数。如果该DOM节点已经在文档中，它将被移动到指定的位置。

第二关，document.getElementById(id)检索DOM节点。 node.value从表单字段中获取文本。您不能将该文本用作.appendChild()的参数。如果要在DOM中的某处插入该文本的副本，则需要创建一个新的DOM节点，将从node.value获取的文本放入该新的DOM节点，然后parent.appendChild(newNode)表示新的DOM节点。

如果你能准确说明你想要的最终结果（显示在点击Add按钮后HTML会是什么样子），那么我们可以为你提供一个精确的代码解决方案。正如你现在的问题所在，目前尚不清楚你最终的结果是什么。

作为一个简单的例子，这里有一些代码从输入字段读取，并在每次按下按钮时将该文本插入DOM：

<input id="newComment" type="text" /><br>
<button onclick="add()">Add</button><br><br>
<div id="comments"></div>

<script>
function add() {
    var newText = document.getElementById("newComment").value;
    if (newText) {
        var paragraph = document.createElement("p");
        paragraph.textContent = newText;
        document.getElementById("comments").appendChild(paragraph);
    }
}
</script>

工作演示：http://jsfiddle.net/jfriend00/T7dtD/

Answer 2

HTML：

Name: <input type="text" id="name" name="name">
<br>
Comment: <input type="text" id="comment" name="comment">
<br>
<input type="button" name="submit" value="Submit Comment" onclick="add()"/>

添加（）：

function add(){
    var newParagraph = document.createElement("p");
    var name = document.getElementById("name").value;
    var comment = document.getElementById("comment").value;
    newParagraph.innerHTML = name + "<br>" + comment;
    document.body.appendChild(newParagraph);
}

您需要设置段落的innerHTML。

Here is a JSFiddle.

.getElementById工作但不是.getElementById（）。value？

2 个答案: