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)，看看它有什么价值。

如果没有看到你的标记，我必须做一些猜测但是尝试：

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

编辑：返回类似于数组的nodeList，但实际上不是数组。

Answer 2

如果您在较早版本的IE中执行此操作getElementsByClassName未定义，则您的email和phone变量未定义。
如果在加载元素phone和email之前将其添加到页面，则email和phone将不确定。
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";
}

Answer 3

document.getElementsByClassName返回nodeList。您可以使用与元素数组类似的方式访问它。

编辑：

已更改为nodeList

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

3 个答案:

编辑：