Uncaught ReferenceError: firstFunc is not defined at HTMLButtonElement.onclick Wordpress Divi

Question

Web 开发行业的新手，很难弄清楚我的代码有什么问题。尝试使用 Divi 通过 Wordpress 将 javascript 实现到代码片段上，但似乎无法理解到底出了什么问题。我的意图是在单击时更改按钮的背景和文本颜色。非常感谢您的帮助！

<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

这个问题是由一些拼写错误引起的。不幸的是，很多人都渴望在评论中列出它们。因此，如果这为您解决了问题，请主动删除您的问题：

if (x.style.backgroundColor == "transparent";) { -> 去掉分号：if (x.style.backgroundColor == "transparent") {
x.style.color = "white"}; -> 交换分号和夹子：x.style.color = "white"; }
(x.style.backgroundColor = "transparent") -> 移除夹子并以分号结束：x.style.backgroundColor = "transparent";
没有getElementByClass只有getElementsByClassName。然而，这将 return 一个数组。只需使用 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>

Uncaught ReferenceError: firstFunc is not defined at HTMLButtonElement.onclick Wordpress Divi

Uncaught ReferenceError: firstFunc is not defined at HTMLButtonElement.onclick Wordpress Divi

html

javascript

css

wordpress

divi