HTML element's value property is giving undefined value

Question

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 g

Answer 1

div element have no value attribute, so you can't use octaveNumber.value to get it

Answer 2

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>