2

使用普通的“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";
    }
}

每当我尝试调用其中一个变量时，都会不断收到未定义的错误。任何帮助将不胜感激。谢谢！

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返回一个节点列表，因此您应该实际定义emailand 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 回答