使用 javascript 从 div 中获取值：始终未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27131899/
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
Get value from div with javascript: Always get undefined
提问by Sjenkie
I had this problem when I get the value from a div:
当我从 div 获取值时遇到了这个问题：
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editorlooks like this:
带有 id 的 diveditor看起来像这样：
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
当我在那个 div 中放一些东西时，它会提醒我 undefined 并且它也会出现在我粘贴的 textarea 中。所以问题显然是这样的：
var n1 = document.getElementById('editor').value;
What am I doing wrong?
我究竟做错了什么？
回答by Alexander T.
Try this
尝试这个
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
回答by Danbardo
I think it's important to note that even if <div>was a HTMLInputElement you would still keep getting undefined because your div,
我认为重要的是要注意，即使<div>是 HTMLInputElement 你仍然会因为你的 div，
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
没有 value 属性，这里是一个带有 value 属性的 div 的例子：
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even through you have entered a value it, .value will still return undefined because <div>is a HTML element and not a HTMLInputElement.
但是，正如其他答案中所提到的，即使您输入了一个值， .value 仍然会返回 undefined 因为<div>是 HTML 元素而不是 HTMLInputElement。
If you really need to store some information in the value of the div you can always do something like this:
如果你真的需要在 div 的值中存储一些信息，你总是可以这样做：
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
在 div 加载后，您强制将 'hello' 作为值。
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
这样做的唯一原因是，如果您真的想将数据存储在 div 的值中，而不能将其存储在 innerHTML 中，因为 div 是可见的。
If you want to store the information within your div like this:
如果你想像这样在你的 div 中存储信息：
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML;is the correct solution, but remember that users will be able to see the information on the webpage.
然后document.getElementById('editor').innerHTML;是正确的解决方案，但请记住，用户将能够在网页上看到信息。
回答by bhantol
HTML Elements and HTMLInputElements are different things.
HTML 元素和 HTMLInputElements 是不同的东西。
The valueattribute is present in HTMLInputElement in HTMLInputElement Reference
该value属性存在于HTMLInputElement 参考中的 HTMLInputElement 中
divelements are HTMLElement
div元素是 HTMLElement
If you change your divto input your Javascriptwill work fine.
如果你改变你div的输入你Javascript会工作得很好。
The option is to use innerHTMLas said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
选项是innerHTML按照另一个答案中的说明使用，但请注意，如果您不控制 HTML 或随着时间的推移忘记 Javascript，这有时可能是 HTML 片段，并且可能导致缺陷。
FYI plain elements attribute reference(there is no value)
仅供参考普通 元素属性参考（没有value）
