Javascript HTML元素'；s value属性正在提供未定义的值

这是完全神秘的。我检查了所有的东西，谷歌搜索了所有的东西，但看起来这应该行得通。我在代码中对其他html元素做了同样的事情，它们都给了我值，但这次我对这个特定的html元素没有定义。下面是一段代码：

<div class="pianoKeyboard">
    <button id="octaveUp" value="off">Octave Up</button>
    <button id="octaveDown" value="off">Octave Down</button>
    <div id="octaveNum" value='0'>Default</div>

你觉得有什么问题吗？因为我没有。我可以

console.log

不带值的元素本身，但是如果我向它添加

.value

，我会得到

未定义的
，这是因为
元素没有
值
属性<代码>
，
，
，
，
，
，和

您可以将该值存储为，即：

data-
属性为变量命名提供了极大的灵活性：它甚至不必是
data-value
。例如，如果要存储默认和当前倍频程，可以选择将其存储为
data default octave
和
data current octave
，并分别作为
selector.dataset.defaultOctave
和
selector.dataset.currentOctave
访问（注意HTML5中以破折号分隔的属性名转换为JS中的camelCase键）

包含连字符的数据属性名称将从连字符中删除并转换为CamelCase

见下面的概念证明：


var octaveNumber=document.getElementById（“octaveNum”）；
var octaveUp=document.getElementById（“octaveUp”）；
Octavup.addEventListener（“单击”，函数（e）{
log（octaveNumber.dataset.value）；
})；

倍频程上升
倍频程下降
违约
这是因为
元素没有
值
属性。
，
，
，
，
，
和

您可以将该值存储为，即：

data-
属性为变量命名提供了极大的灵活性：它甚至不必是
data value
。例如，如果要存储默认和当前倍频程，可以选择将其存储为
data default octave
和
data current octave
，并作为
select>访问或.dataset.defaultOctave
和
selector.dataset.currentOctave
（注意HTML5中以破折号分隔的属性名称转换为JS中的camelCase键）

包含连字符的数据属性名称将从连字符中删除并转换为CamelCase

见下面的概念证明：


var octaveNumber=document.getElementById（“octaveNum”）；
var octaveUp=document.getElementById（“octaveUp”）；
Octavup.addEventListener（“单击”，函数（e）{
log（octaveNumber.dataset.value）；
})；

倍频程上升
倍频程下降
违约
div
元素没有
值
属性，因此不能使用
octaveNumber.value
来获取它
div
元素没有
值
属性，因此不能使用
octaveNumber.value
来获取它
，我假设向div数据值添加+1，我们首先必须将其解析为一个整数，对吗？谢谢你的明确回答。@Limpuls这通常是一个明智的想法：）因为稍有悟性的用户可能会尝试变得有趣并修改DOM属性值。您可以简单地使用
+octaveNumber.dataset.value
将其强制为一个数字（例如
var octave=+octaveNumber.dataset.value
），或者使用更详细的
数字（octaveNumber.dataset.value）
：），我假设要向Div数据值添加+1，我们首先必须将其解析为一个整数，对吗？谢谢你的明确回答。@Limpuls这通常是一个明智的想法：）因为稍有悟性的用户可能会尝试变得有趣并修改DOM属性值。您可以简单地使用
+octaveNumber.dataset.value
将其强制为一个数字（例如
var octave=+octaveNumber.dataset.value
），或者使用更详细的
数字（octaveNumber.dataset.value）
：）
var octaveNumber = document.getElementById("octaveNum");

    octaveup.addEventListener("click", function(e) {
      if (booleanVal == false) {
        booleanVal = true;
        console.log(octaveNumber.value);

<div id="octaveNum" data-value='0'>Default</div>

document.getElementById('octaveNum').dataset.value