HTML要素のvalueプロパティが未定義の値を与えています

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

あなたは、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>

Answer 2

divあなたはそれ