javascript - getElementByClassName を使用した innerHTML が機能しない

Question

これは機能します：

<td onmouseover="document.getElementById('textbox').innerHTML='Hidden text'" onmouseout="document.getElementById('textbox').innerHTML='Show text'">
    <div id="textbox">Show text</div>
</td>

しかし、これはそうではありません:

<td onmouseover="document.getElementByClassName('textbox').innerHTML='Hidden text'" onmouseout="document.getElementByClassName('textbox').innerHTML='Show text'">
    <div class="textbox">Show text</div>
</td>

どうすればこれを修正できますか? 複数回使用するにはクラスが必要です。

Answer 1

特定のクラスを持つ複数の要素が存在する可能getElementByClassName性があるため、関数は1 つしかありません。getElementsByClassName

あなたは置き換えることができます

 document.getElementByClassName('textbox')

と

 document.getElementsByClassName('textbox')[0]

あなたの質問の編集に続いて編集してください：

この関数は IE8 では使用できません。このブラウザで使用する場合は、この質問で説明されているような shim を追加する必要があります。

Answer 2

ですgetElementsByClassName。sの後の複数形に注意してくださいElement。

これは配列なので、インデックス番号を指定する必要があります。

document.getElementsByClassName('class-name')[0].innerHTML = 'html text'

すべての要素に変更を適用する必要がある場合は、for ループを使用します。

for(i in document.getElementsByClassName('class-name')){
    document.getElementsByClassName('class-name')[i].innerHTML = 'html text';
}

Answer 3

jQuery を使用できる場合は、以下を使用する方が簡単.html()です。

$("#textbox").html("Hidden text") // id=textbox
$(".textbox").html("Hidden text") // class=textbox

Answer 4

That's because getElementsByClassName is returning an array of elements. You can try

document.getElementsByClassName('textbox')[0].innerHTML='Hidden text'