Javascript 如何'；将活动类添加到当前按钮'；

我在shopify网站的一个页面上有下面的代码，但是按钮在激活时不会改变颜色。当我在bootply上试用时，它似乎很好用，但在shopify上不起作用。 我在控制台中看到的错误是Uncaught TypeError:“无法读取null的属性'getElementsByClassName'”

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

最好等待DOM完全加载所有元素，然后再进行操作

document.addEventListener("DOMContentLoaded", function() {  
// Place class assigning code here 
 // Add active class to the current button (highlight it)
 var btnContainer = document.getElementById("myBtnContainer");
 var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
});
}
// Place filter selection also inside DOM Load
filterSelection("all");
});  

document.addEventListener（“DOMContentLoaded”，function（）{
//在这里放置类分配代码
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

可能

var btns=btnContainer.getElementsByCassName（“btn”）；

导致错误。检查

btnContainer

是否有值现代浏览器有类列表。添加/删除（）@nidhenjoseph如何检查btnContainer是否有值？一个简单的if条件将执行

if（btnContainer）{var btns=btnContainer.GetElementsByCassName（“btn”）；}

@user2932057就是这样！非常感谢。我想将您的答案标记为正确答案。您是否也知道为什么“all”过滤器不工作，而其他过滤器工作正常？实际上，在页面加载时，“all”按钮不显示任何内容，但如果我转到另一个按钮并返回到“全部”按钮，然后正确显示谢谢！您的编辑也有助于所有过滤器，非常感谢。

document.addEventListener("DOMContentLoaded", function() {  
// Place class assigning code here 
 // Add active class to the current button (highlight it)
 var btnContainer = document.getElementById("myBtnContainer");
 var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
});
}
// Place filter selection also inside DOM Load
filterSelection("all");
});