getElementsByClassName帮助(分配给变量时未捕获的引用错误)

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.

调试的第一步应该是a console.log(phone),看看它有什么价值.

没有看到你的标记,我不得不采取一些猜测,但尝试:

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

编辑:返回nodeList类似于数组的数组,但实际上不是数组.