使用 javascript 从 div 获取值:始终未定义

IT技术 javascript html undefined
2021-03-01 09:24:58

当我从 div 获取值时遇到了这个问题:

function sync(){
    var n1 = document.getElementById('editor').value;
    alert(n1);
    var n2 = document.getElementById('news');
    n2.value = n1;
}

带有 id 的 diveditor看起来像这样:

<div class='message'  id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>

当我在那个 div 中放一些东西时,它会提醒我 undefined 并且它也会出现在我粘贴的 textarea 中。所以问题显然是这样的:

var n1 = document.getElementById('editor').value;

我究竟做错了什么?

3个回答

试试这个

var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent

我认为重要的是要注意,即使<div>是 HTMLInputElement 你仍然会因为你的 div 变得未定义,

<div class='message'  id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>

没有 value 属性,这里是一个带有 value 属性的 div 的例子:

<div class='message'  id='editor' value='hello'></div>

但是,正如其他答案中提到的,即使您输入了一个值, .value 仍然会返回 undefined 因为<div>是 HTML 元素而不是 HTMLInputElement。

如果你真的需要在 div 的值中存储一些信息,你总是可以这样做:

<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>

在 div 加载后,您强制将 'hello' 作为值。

这样做的唯一原因是,如果您真的想将数据存储在 div 的值中,而不能将其存储在 innerHTML 中,因为 div 是可见的。

如果你想像这样在你的 div 中存储信息:

<div id="editor">all the information i want to store</div>

然后document.getElementById('editor').innerHTML; 是正确的解决方案,但请记住,用户将能够在网页上看到信息。

HTML 元素和 HTMLInputElements 是不同的东西。

value属性存在于HTMLInputElement 参考中的 HTMLInputElement 中

div 元素是 HTMLElement

如果你改变你div的输入你Javascript会工作得很好。

选项是innerHTML按照另一个答案中的说明使用,但请注意,如果您不控制 HTML 或随着时间的推移忘记 Javascript,这有时可能是 HTML 片段,并可能导致缺陷。

仅供参考普通 元素属性参考(没有value