HTML元素的值屬性給出了未定義的值

這完全是神祕的。我查了一切，搜索了一切，但看起來這應該工作。我在我的代碼中使用其他html元素完成了相同的事情，並且他們都給了我值，但是這次我對這個特定的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。

來源

2017-08-13 Limpuls

這是因爲<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>

來源

2017-08-13 19:51:50 Terry

我承擔要爲Div數據值添加+1，我們首先必須將其解析爲整數，對不對？感謝您的明確答覆。 – Limpuls

@Limpuls這通常是一個明智的想法:)因爲有點精明的用戶可能會嘗試變得有趣並修改DOM屬性值。您可以簡單地使用'+ octaveNumber.dataset.value'將它強制轉換爲數字（例如'var octave = + octaveNumber.dataset.value'），或者使用更詳細的Number（octaveNumber.dataset.value）:) – Terry

div元素沒有value屬性，所以你不能用octaveNumber.value得到它

來源

2017-08-13 19:52:54 trgiangvp3

HTML元素的值屬性給出了未定義的值

回答

相關問題