从HTML调用时未执行Javascript

如何解决从HTML调用时未执行Javascript

我正在尝试制作一个带有复选框和javascript的简单HTML文件，这些JavaScript会在单击时更改复选框的颜色。问题是未调用javascript文件，因此单击按钮无用，因为未读取javascript代码。看起来很简单，但我看不到我在做什么错：

HTML代码：

    <!DOCTYPE html>
<html>
<head>
<script src="and_gate.js" defer></script>
</head>
<body style= "background-color: white;">

  <label id=in1 class="container1" onclick="in1(element1)">0
    <input type="checkBox">
  </label>
  <style>
    .container1 {
      background-color:green;
      font-size: 2vw;
    }
    </style>

  </body>
  </html>

JavaScript代码：

alert('clicked')
funtion in1(element1){
  element1.style="background-color:red;"
}

解决方法

在嵌入式事件处理程序中，您可以使用this引用事件的目标。

您还拼错了function。并且警报需要在函数内部。

function in1_fun(element1) {
  alert('clicked')
  element1.style = "background-color:red;"
}

.container1 {
  background-color: green;
  font-size: 2vw;
}

<label id=in1 class="container1" onclick="in1_fun(this)">0
    <input type="checkbox">
</label>

在函数中使用与元素ID相同的名称也不是一个好主意。这两个都成为全局变量，并且ID变量可能会替换功能变量。

在JavaScript和HTML中，当您将JS函数传递给元素的onclick属性时，该函数不知道正在调用它的元素。您需要通过某种方式来找到该元素，例如 id （或者我错过的this外部上下文，正如Barmar在his excellent answer中指出的那样）

然后可以将此ID与document.getElementById()之类的函数一起使用，以在DOM中找到所需的元素，并对其进行处理，在这种情况下，请更改其style属性。

您还将功能拼写为“ funtion”，这将导致它不作为功能处理。

function in1(id) {
  document.getElementById(id).style = "background-color:red;"
}

<!DOCTYPE html>
<html>

<head>
  <script src="and_gate.js" defer></script>
</head>

<body style="background-color: white;">

  <label id=in1 class="container1" onclick="in1('in1')">0
    <input type="checkbox">
  </label>
  <style>
    .container1 {
      background-color: green;
      font-size: 2vw;
    }
  </style>

</body>

</html>