Question

我见过许多类似的问题，但是当我尝试它们时，它们最终会失败。它已经到了我的代码完全混乱的地步，我需要一些帮助清理它和修复我的问题。（使用铬）

到目前为止，我已经尝试选择表单的值并将其放入div中，我曾尝试使用该按钮作为启动脚本的链接，以便页面不会重置，并且还可以在线找到许多其他答案，这些答案都没有帮助，所以我要求提供个性化的帮助。

function on_comment_add() {
	
	var main = document.getElementById("div1");
	var add_user_name = document.createElement("div");
	var add_user_comment = document.createElement("div");
	
	add_user_name.setAttribute("id", "add_user_name");
	add_user_comment.setAttribute("id", "add_user_comment");
	
	<!-- var node = document.createTextNode("This is new."); -->
	var node_1 = document.getElementById("user_name").value;
	var node_2 = document.getElementById("user_comment").value;
	
	add_user_name.appendChild(node_1);
	add_user_comment.appendChild(node_2);
	
	var element = document.createElement("div");
	element.setAttribute("id", "display_comment_div");
	element.appendChild(add_user_name);
	element.appendChild(add_user_comment);
	main.appendChild(element);
	main.innerHTML = element;
	
	return false;
}

body {
	background-color: lightGreen;
}

div.middle {
	width: 80%;
	margin-left: 10%;
	background-color: #47e077;
	height: 940px;
	font-size: 10pt;
	font-family: aubrey;
	border: 3px solid gold;
}

.comments-form {
	text-align: center;
}

#display_comment_div {
	background: rgba(200, 54, 54, 0.1);
	width: 80%;
	margin-left: 9%;
	border: 0.1px solid lightGreen;
	border-radius: 25px;
}

#add_user_name {
	width: 45%;
	float: left;
}

#add_user_comment {
	width: 45%;
	display: inline-block;
	float: right;
}

<div class="middle">
	<div class="comments-form">
		<form>
			<label for="name" style="width:100px; display:inline-block;">Name</label>
			<input id="user_name" type="text" placeholder="name goes here" style="width:300px; margin-left:5px;" />
			<br><br>
			<label for="comment" style="width:100px; display:inline-block;">Comment</label>
			<textarea id="user_comment" placeholder="comment goes here" maxlength="150" style="width:300px;max-width:300px;"></textarea><br>
			<button style="margin-left:310px;" onmousedown="return on_comment_add">Submit</button>
			
		</form>
		<div id="div1">
		</div>

		
	</div>
</div>

我想我要问的是，是否有人可以帮助我在表单下方显示用户名和评论，但对我来说这似乎很棘手，因为我经历了很多对我不起作用的答案，我想不出任何其他方法。

为了澄清这个代码并不是为了保留表单中的注释，也不是要成为一个功能齐全的站点。我只是对一些代码进行了一些修改，以便我可以将其作为大学任务交付。

Answer 1

使用onclick并传递内部事件：

<button style="margin-left:310px;" onclick="on_comment_add(event)">Submit</button>

并禁用默认表单提交操作：

function on_comment_add(e) {
    e.preventDefault()
    var main = document.getElementById("div1");
    var add_user_name = document.createElement("div");
    var add_user_comment = document.createElement("div");

    add_user_name.setAttribute("id", "add_user_name");
    add_user_comment.setAttribute("id", "add_user_comment");

    var node_1 = document.createElement("div");
  node_1.innerHTML= document.getElementById("user_name").value;
    var node_2 = document.createElement("div");
  node_2.innerHTML = document.getElementById("user_comment").value;

    add_user_name.appendChild(node_1);
    add_user_comment.appendChild(node_2);

    var element = document.createElement("div");
    element.setAttribute("id", "display_comment_div");
    element.appendChild(add_user_name);
    element.appendChild(add_user_comment);
    main.appendChild(element);

    return false;
}

可行的示例：https://jsfiddle.net/kingychiu/z6gnqswn/

Answer 2

将类型更改为＆＃34;按钮＆＃34;防止自动表单发送并将括号添加到onmousedown表达式：

<button type="button" style="margin-left:310px;" onmousedown="return on_comment_add()">Submit</button>

然后改变这个

add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);

到此（因为node_1，node_2是值，而不是元素）：

add_user_name.innerHTML = node_1;
add_user_comment.innerHTML = node_2;

删除该行

main.innerHTML = element;

以上

return false;

这应该有效。

HTML JS表单到div评论（临时更改）

2 个答案: