javascript - getElementsByClassName 帮助(分配给变量时 Uncaught ReferenceError )

Question

在使用普通的 'ol vanilla 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";
    }
}

每当我尝试调用其中一个变量时，总是出现未定义的错误。任何帮助将不胜感激。谢谢!

Answer 1

提示:

document.getElementsByClassName -- 注意是复数。它返回一个 nodeList 或一个 null。

调试的第一步应该是 console.log(phone) 并查看它有什么值(value)。

在没有看到您的标记的情况下，我不得不进行一些猜测，但请尝试:

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

编辑:返回一个类似数组但实际上不是数组的nodeList。