未接收参考：未在htmlbuttonelement.onclick wordpress Divi上定义FirstFunc

Question

网络开发行业非常新，并且在弄清楚我的代码出了什么问题时遇到了一些麻烦。尝试使用Divi将JavaScript实现在使用WordPress的代码段上，但似乎无法理解到底出了什么问题。我的意图是改变背景＆amp;单击时按钮的文字颜色。我感谢帮助！

<button onClick="firstFunc()";
 class="butCol";
 style="background-color: transparent;
 border: none;
 font-weight: bold;
 border-radius: 25px;
 padding: 2px 15px";>LATTES</button>

<script>
function firstFunc() {
 var x = document.getElementByClass("butCol");
  if (x.style.backgroundColor == "transparent";) {
    x.style.backgroundColor = "#373975"; 
    x.style.color = "white"};
  else {
    (x.style.backgroundColor = "transparent")
  };
};
</script>

Answer 1

问题是由一些错别字引起的。不幸的是，对于许多人来说，渴望在评论中列出它们。因此，如果这为您解决问题，请自愿删除您的问题：

1. 如果（X.Style.backgroundColor ==“透明”;）{ - ＆gt;删除分号：如果（X.Style.backgroundColor ==“透明”）{
2. x.style.color =“ white”}; - ＆gt;交换分号和夹具：X.Style.Color =“ White”; }
3. （X.Style.backgroundColor =“透明”） - ＆gt;卸下夹具并用半圆柱完成：X.Style.backgroundColor =“透明”;
4. 没有getElementByClass Juste GetElementsByClassName。但是，这将返回一个数组。只需使用QuerySelector。

function firstFunc() {
 var x = document.querySelector(".butCol");
  if (x.style.backgroundColor == "transparent") {
    x.style.backgroundColor = "#373975"; 
    x.style.color = "white";
  } else {
    x.style.backgroundColor = "transparent";
  };
};

<button onClick="firstFunc()";
 class="butCol";
 style="background-color: transparent;
 border: none;
 font-weight: bold;
 border-radius: 25px;
 padding: 2px 15px";>LATTES</button>

但是，更聪明的是使用CSS应用更改，并仅使用.classlist.toggle（'class-name'）;函数：

function firstFunc() {
 document.querySelector('.butCol').classList.toggle('clicked'); 
}

.butCol {
  background-color: transparent;
  border: none;
  border-radius: 25px;
  padding: 2px 15px;
  font-weight: bold;
}
  
.clicked {
  background-color: #373975;
  color: white;
}

<button onClick="firstFunc()";
 class="butCol";>LATTES</button>