input.addEventListener不是函數與

Question

首先，我有這個代碼

var input = document.querySelector("fieldset > input"); 
var label = document.querySelector("fieldset > label"); 

input.addEventListener("focus", function(event) { 
    if (label.classList.contains("label-blur")) { 
    label.classList.remove("label-blur"); 
    label.classList.add("label-focus"); 
    } else { 
    label.classList.add("label-focus"); 
    } 
}); 

input.addEventListener("blur", function(event) { 
    if (!input.value) { 
    label.classList.remove("label-focus"); 
    } else { 
    label.classList.add("label-blur"); 
    } 
}); 

它正常工作。

然後我改變'querySelector''querySelectorAll'。 我發現信息，addEventListener不能與querySelectorAll（JS error object has no method addEventListener）一起使用。 所以分辨率是這樣的：

var input = document.querySelectorAll("fieldset > input"); 
var label = document.querySelectorAll("fieldset > label"); 


for(var i=0; i < input.length; i++) { 
    input[i].addEventListener("focus", function(event) { 
    if (label.classList.contains("label-blur")) { 
     label.classList.remove("label-blur"); 
     label.classList.add("label-focus"); 
    } else { 
     label.classList.add("label-focus"); 
    } 
    }); 

    input[i].addEventListener("blur", function(event) { 
    if (!input.value) { 
     label.classList.remove("label-focus"); 
    } else { 
     label.classList.add("label-blur"); 
    } 
    }); 
}; 

可是這樣一來我有新的錯誤：

• 遺漏的類型錯誤：無法讀取屬性「包含」未定義
• 遺漏的類型錯誤的：無法讀取屬性'刪除'未定義

請讓我知道，如何解決這個問題。

我tryed這種方式（由康納黑斯廷斯推薦）：

for(var i=0; i < input.length; i++) { 
     input[i].addEventListener("focus", function(event) { 
     for(var j=0; j < label.length; j++) { 
      if (label[j].classList.contains("label-blur")) { 
      label[j].classList.remove("label-blur"); 
      label[j].classList.add("label-focus"); 
      } else { 
      label[j].classList.add("label-focus"); 
      } 
     }; 
     }); 

     input[i].addEventListener("blur", function(event) { 
     for(var j=0; j < label.length; j++) { 
      if (!input.value) { 
      label[j].classList.remove("label-focus"); 
      } else { 
      label[j].classList.add("label-blur"); 
      } 
     }; 
     }); 
    }; 

它的工作好，但每一個 '的addEventListener' 作品是錯誤的。現在只需「標籤焦點」正在工作。它對我的每一個工作（如果任何輸入：焦點，每個標籤顯示）。

而'讓j = i'代替'for（var j = 0; j < label.length; j ++）'什麼也不做。

Answer 1

你在for循環，你需要爲了得到在相同的索引標籤爲標籤的輸入與標籤做訪問通過i輸入同樣的方式節點列表

你也必須做同樣的事情，輸入[I]事件偵聽器的內部

for(var i=0; i < input.length; i++) { 
    input[i].addEventListener("focus", function(event) { 
    if (label[i].classList.contains("label-blur")) { 
     label[i].classList.remove("label-blur"); 
     label[i].classList.add("label-focus"); 
    } else { 
     label[i].classList.add("label-focus"); 
    } 
    }); 

    input[i].addEventListener("blur", function(event) { 
    if (!input[i].value) { 
     label[i].classList.remove("label-focus"); 
    } else { 
     label[i].classList.add("label-blur"); 
    } 
    }); 
}; 

Answer 2

var inputs = document.querySelectorAll("fieldset > input"), 
    labels = document.querySelectorAll("fieldset > label"); 


for(var i=0; i < inputs.length; i++) { 
    var input = inputs[i], 
     label = labels[i]; 
    input.addEventListener("focus", function(event) { 
    var input = this.input, 
     label = this.label; 
    if (label.classList.contains("label-blur")) { 
     label.classList.remove("label-blur"); 
     label.classList.add("label-focus"); 
    } else { 
     label.classList.add("label-focus"); 
    } 
    }.bind({input: input, label: label})); 

    input.addEventListener("blur", function(event) { 
    var input = this.input, 
     label = this.label; 
    if (!input.value) { 
     label.classList.remove("label-focus"); 
    } else { 
     label.classList.add("label-blur"); 
    } 
    }.bind({input: input, label: label})); 
}; 

如果使用ES6，那麼你應該使用let而不是無功後的for循環