的JavaScript未定義瘋狂

Question

var requestInfo; 
var requestParent; 

var switchButton = setInterval(function() { 
    requestParent = document.getElementsByClassName("solid_color_2"); 
    if(typeof requestParent[0] != "undefined") { 
    requestInfo = requestParent[0].getElementsByTagName('A'); 
    requestInfo[0].className = ""; 
    requestInfo[0].className = "instance-0"; 
    requestParent[0].className = ""; 
    requestParent[0].className = "button"; 
    requestInfo[0].style.backgroundColor = "#029c53"; 
    clearInterval(switchButton); 
    console.log("interval last time"); 
    } 
}, 1000); 

Can't execute "requestParent[0].className = "button";

的標記：

<div class="button solid_color_2"> 
    <a class="primary-color instance-0" href="#">REQUEST INFO</a> 
</div> 

這裏的錯誤：

Answer 1

getElementsByClassName返回現場節點列表，這意味着在DOM變化的反映通過更改列表。

所以，用這條線你取得按鈕元素

requestParent = document.getElementsByClassName("solid_color_2"); 

但隨後這條線......

requestParent[0].className = ""; 

你清除類名移除的活動節點列表當您嘗試更新它時，列表中的那個元素導致錯誤。

您最好的選擇是使用querySelectorAll，它返回一個HTML集合，它是而不是直播。您也可以刪除設置className = ""的行。

var switchButton = setInterval(function() { 

    // pay particular attention here because we're picking up 
    // a element using it's *class*, hence .solid_color_2 and 
    // not solid_color_2 (without the preceding dot) 
    requestParent = document.querySelectorAll(".solid_color_2"); 
    if (typeof requestParent[0] != "undefined") { 
    requestInfo = requestParent[0].querySelectorAll('a'); 
    requestInfo[0].className = "instance-0"; 
    requestParent[0].className = "button"; 
    requestInfo[0].style.backgroundColor = "#029c53"; 
    clearInterval(switchButton); 
    console.log("interval last time"); 
    } 
}, 1000); 

DEMO