Question

这完全是神秘的。我检查了一切，谷歌搜索了一切，但看起来这应该工作。我在代码中使用其他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。

Answer 1

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

您可以将值存储为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键。

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

见下面的概念验证：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

div元素没有value属性，因此您无法使用octaveNumber.value来获取它

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

2 个答案: