getElementsByClassName（）。classList.remove（）返回未定義

Question

我有一個Marketo表單，我希望在提交表單時隱藏所有表單元素並顯示div（“ thank-you”類），並且不斷收到錯誤Uncaught TypeError: Cannot read property 'remove' of undefined 。 有什么想法我可能做錯了嗎？

小提琴： https : //jsfiddle.net/Ld7fajmy/

的HTML

<div class="thank-you hide">
  message
</div>

JS

document.getElementsByClassName("thank-you").classList.remove("hide");

Answer 1

getElementsByClassName方法作為NodeList對象返回具有指定類名的文檔中所有元素的集合 ，因此您需要通過傳遞索引來訪問它

document.getElementsByClassName("thank-you")[0].classList.remove("hide");

Answer 2

替換為：

    document.getElementsByClassName('message')[0].classList.remove('hide');

請注意，我刪除了。 （點）在“消息”上-您將獲得className，因此除非您使用querySelector，否則無需添加點。

就像@tyler提到的那樣，getElementsByClassName返回所有元素的集合，這將返回一個數組。 因此您需要添加[0]以獲得第一個結果。