2

プレーンな'olvanilla javascriptでクラス名を選択するのに問題があります：

var email = document.getElementsByClassName('email');
var phone = document.getElementsByClassName('phone');
// Hide phone by default
phone.style.display = "none";

function showContact() {
    var dropdown = document.getElementById( "contact-select" );        // Get a reference to the dropdown (select) element
    var selectedItemValue = dropdown.options[ dropdown.selectedIndex ].value; // use the dropdown reference to get the selected item's value

    if ( selectedItemValue === "phone" ) {
        email.style.display = "none";
        phone.style.display = "block";
    } else {
        phone.style.display = "none";
        email.style.display = "block";
    }
}

変数の1つを呼び出そうとすると、未定義のエラーが発生し続けます。どんな助けでも大歓迎です。ありがとう！

4

3 に答える 3

5

ヒント：

document.getElementsByClassName-- 複数形であることに注意してください。nodeListまたはを返しますnull。

デバッグの最初のステップは、console.log(phone)それがどのような価値を持っているかを確認する必要がありました。

あなたのマークアップを見ずに、いくつか推測する必要がありますが、試してください：

var email = document.getElementsByClassName('email')[0];
var phone = document.getElementsByClassName('phone')[0];

編集：配列のようなものを返しますnodeListが、実際には配列ではありません。

于 2012-09-14T00:31:18.277 に答える
2
  1. 古いバージョンの IE でこれを行っている場合はgetElementsByClassName定義されていないため、変数emailとphone変数は未定義です。
  2. これが要素の前にページに追加されてphone読み込まemailれるemailとphone、未定義になります。
  3. getElementsByClassNameノードリストを返すので、実際に と を定義する必要がemailありますphone。

コード：

var email = document.getElementsByClassName('email')[0];
var phone = document.getElementsByClassName('phone')[0];

更新：または配列をループします：

for(var i = 0; i < phone.length; i++)
{
    phone[i].style.display = "none";
}
于 2012-09-14T00:31:29.587 に答える
1

document.getElementsByClassNameを返しますnodeList。要素の配列と同様にアクセスします。

編集：

に変更nodeList

于 2012-09-14T00:31:19.893 に答える