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

That is because

elements do not have a value attribute. It is only for a selected subset of elements: , , ,

, , , and .

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

Default

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

Octave Up Octave Down

Default