使用 JavaScript 在“div”上编写文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7195844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Writing text on "div" using JavaScript
提问by Raúl Nú?ez Cuevas
I'm having some trouble whenever I want to add some text to my div tag, here's my code:
每当我想向我的 div 标签添加一些文本时，我都会遇到一些麻烦，这是我的代码：
<html>
<body>
<div id="comments">
</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>
<script type="text/javascript" >
function writeComment()
{
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML=comment;
}
</script>
</body>
</html>
It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?
它正确地完成了它必须做的事情，但随后它只切换回文本框，我刚刚写的评论消失了。知道这里发生了什么吗？
Thank you so much for your time.
非常感谢您的参与。
回答by Joe
It is because you are submitting the form.
这是因为您正在提交表单。
Quick fix:
快速解决：
<input type="submit" value="Ready!" onClick="writeComment()" />
to
到
<input type="button" value="Ready!" onClick="writeComment()" />
In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:
此外，您可以阻止输入的默认操作。基本上告诉浏览器您将使用preventDefault处理操作：
function writeComment(e) {
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML = comment;
e.preventDefault();
return false;
}
回答by n8wrl
What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.
发生的事情是您的表单正在提交，页面正在刷新，而 div 正在返回其预先设置的 JavaScript 内容。
Try swapping the type='submit' to 'button' on the button.
尝试将按钮上的 type='submit' 交换为 'button'。
回答by Paul
When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:
当您单击提交按钮时，表单被提交，导致整个页面重新加载。您需要从提交按钮的 onclick 返回 false 以防止它：
<input type="submit" value="Ready!" onclick="writeComment(); return false;" />
Or, if you don't want the button to ever submit the form change type="submit"to type="button".
或者，如果您不希望按钮将表单更改提交type="submit"到type="button".
PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.
附注。使用 onclick 属性是不好的做法。而是使用纯 JS 将处理程序绑定到单击事件。
回答by lukas.pukenis
This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).
这是因为您不仅使用常规按钮，还使用提交按钮，默认情况下将表单提交给服务器。您可以看到您的评论是通过 URL 提交的，因为您没有指定方法（GET 和 POST 和 GET 是默认值）。
Simply write:
简单地写：
onclick="writeComment();return false;"
Returning FALSE prevents from default behaviour - submitting the form.
返回 FALSE 可防止默认行为 - 提交表单。
回答by VirtualTroll
you should switch <input type="submit" value="Ready!" onClick="writeComment()" />
for <input type="button" value="Ready!" onClick="writeComment()" />
你应该切换<input type="submit" value="Ready!" onClick="writeComment()" />
为<input type="button" value="Ready!" onClick="writeComment()" />
回答by George Bora
Or another option is to convert your submitinto a buttonand take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.
或者另一种选择是将您的转换submit为 abutton并将其从表单中取出，按钮现在可以存在于表单之外并且从您粘贴的代码中我不明白您为什么必须使用表单，这将意味着您的页面是当您单击“就绪”按钮时不会重新加载。
回答by DrStrangeLove
try <input type="button" value="Ready!" onClick="writeComment()" />
尝试 <input type="button" value="Ready!" onClick="writeComment()" />
回答by Joseph Silber
You'll have to prevent your form from submitting:
您必须阻止您的表单提交：
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
回答by Dementic
change this
改变这个
<input type="submit" value="Ready!" onClick="writeComment()" />
to this:
对此：
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
回答by Daniel A. White
Its making another request to the server, which is causing the page to be rendered again.
它向服务器发出另一个请求，这导致页面再次呈现。
Just return false from writeComment.
只需从writeComment.
