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]以获得第一个结果。