HTML 元素的 value 属性给出了未定义的值 [英] HTML element's value property is giving undefined value

问题描述

这完全是神秘的.我检查了一切，用谷歌搜索了一切，但看起来这应该有效.我在我的代码中用其他 html 元素做了同样的事情，它们都给了我值，但是这次我对这个特定的 HTML 元素没有定义.以下代码片段:

<button id="octaveUp" value="off">八度向上</button><button id="octaveDown" value="off">Octave Down</button><div id="octaveNum" value='0'>默认</div>

<小时>

var OctaveNumber = document.getElementById("octaveNum");Octaveup.addEventListener("点击", function(e) {如果(布尔值 == 假){布尔值 = 真；console.log(octaveNumber.value);

你觉得有什么问题吗?因为我没有.我可以 console.log 元素本身没有值，但如果我添加 .value 到它，我得到 undefined.

解决方案

那是因为

元素没有 value 属性.仅适用于选定的元素子集:、、、

、<;meter>、 和 .

您可以将该值存储为 HTML5 data- 属性，即:

默认

data- 属性的值可以简单地通过编程方式访问:

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

data- 属性为您提供了极大的变量命名灵活性:它甚至不必是 data-value.例如，如果要存储默认和当前八度音程，可以选择存储为data-default-octave和data-current-octave，并访问分别为 selector.dataset.defaultOctave 和 selector.dataset.currentOctave (注意 HTML5 中以破折号分隔的属性名称转换为 JS 中的驼峰键).

<块引用>

包含连字符的数据属性名称将被去除其连字符并转换为驼峰式大小写.

请参阅下面的概念验证:

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

<button id="octaveUp" value="off">八度向上</button><button id="octaveDown" value="off">Octave Down</button><div id="octaveNum" data-value='0'>默认</div>

This is totally mysterious. I checked everything, googled everything, but looks like this should work. I've done same things in my code with others html elements and they all give me the values, but this time I'm getting undefined for this particular HTML element. The snippet of code below:

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

Do you see any problem? Because I don't. I can console.log the element itself without the value, but if I add .value to it, I get undefined.

解决方案

That is because <div> elements do not have a value attribute. It is only for a selected subset of elements: <button>, <option>, <input>, <li>, <meter>, <progress>, and <param>.

You can store the value as a HTML5 data- attribute, i.e.:

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

The value of the data- attribute can simply be accessed programmatically using:

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

The data- attribute offers you tremendous flexibility over the naming of variables: it doesn't even have to be data-value. For example, if you want to store the default and current octaves, you can choose to store it as data-default-octave and data-current-octave, and access it as selector.dataset.defaultOctave and selector.dataset.currentOctave respectively (note the conversion of dash-delimited attribute name in HTML5 to camelCase keys in JS).

Data attribute names which contain hyphens will be stripped of their hyphens and converted to CamelCase.

See proof-of-concept below:

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>

这篇关于HTML 元素的 value 属性给出了未定义的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！