HTML元素的值属性给出了未定义的值

问题描述：

这完全是神秘的。我查了一切，搜索了一切，但看起来这应该工作。我在我的代码中使用其他html元素完成了相同的事情，并且他们都给了我值，但是这次我对这个特定的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>

var octaveNumber = document.getElementById("octaveNum"); 

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

你看不出什么问题？因为我没有。我可以console.log元素本身没有价值，但如果我加.value它，我得到undefined。

答

这是因为<div>元素没有value属性。 It is only for a selected subset of elements：<button>，<option>,<input>, <li>,<meter>, <progress>和<param>。

您可以将值存储为HTML5 data- attribute，即：

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

的data-属性的值可以简单地使用编程方式访问：

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

的data-属性在为您提供了极大的灵活性变量的命名：它甚至不必是data-value。例如，如果要存储默认和当前八度音，可以选择将其存储为data-default-octave和data-current-octave，并分别将其存储为selector.dataset.defaultOctave和selector.dataset.currentOctave（请注意将HTML5中的由短划线定界的属性名称转换为JS中的camelCase键）。

数据属性，包含连字符将被剥夺其连字符，并转换为驼峰名称。

看到，有证据的概念如下：

var octaveNumber = document.getElementById("octaveNum"); 
 
var octaveUp = document.getElementById("octaveUp"); 
 
octaveUp.addEventListener("click", function(e) { 
 
    console.log(octaveNumber.dataset.value); 
 
});

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

我承担要为Div数据值添加+1，我们首先必须将其解析为整数，对不对？感谢您的明确答复。 – Limpuls

@Limpuls这通常是一个明智的想法:)因为有点精明的用户可能会尝试变得有趣并修改DOM属性值。您可以简单地使用'+ octaveNumber.dataset.value'将它强制转换为数字（例如'var octave = + octaveNumber.dataset.value'），或者使用更详细的Number（octaveNumber.dataset.value）:) – Terry

答

div元素没有value属性，所以你不能用octaveNumber.value得到它

HTML元素的值属性给出了未定义的值

相关推荐