javascript - 更改时类型错误 : checked is not a function at HTMLInputElement.

Question

我在为复选框的onchange编写checked()函数时遇到了问题:

<input
      type="checkbox"
      id = "checked"
      onchange="checked()"
    />

这是我的 JavaScript:

const check = document.getElementById("checkbox")
const yes = document.getElementsByClassName("yes")

function checked() {
  if (check.checked) {
    yes.innerHTML = "Yes"
  } else {
    yes.innerHTML = "No"
  }
}

基本上，我希望带有 yes 类的跨度根据是否选中复选框来更改输出(说是或否) 然而，当我检查时，它说“TypeError:检查不是一个函数 at HTMLInputElement.onchange”，即使我的 javascript 完美链接到我的 HTML(我用警报检查了这一点)。

我该如何解决这个问题？

Answer 1

您通过 id checkbox 获取复选框，但在输入字段中输入的 id="checked" 不正确，因此您需要更正您的 id从选中到复选框。

<input
      type="checkbox"
      id = "checkbox"
      onchange="checked()"
    />

您还需要将函数名称从 checked 更改为另一个名称(例如 checkData ，它与 native 值/函数不相似)，然后包装您的 document.getElementById 进入您的函数

您也不应该使用 getElementsByClassName ，因为它返回元素列表，而 innerHTML 不适用于这些元素，因此您需要使用 选择特定元素>getElementById

function checkData() {
  const check = document.getElementById("checkbox")
  const yes = document.getElementById("yes") //need to use `getElementById` instead of `getElementsByClassName`

  //if `yes` element is not there, we don't need to set `innerHTML`
  if(!yes) {
    return
  }

  if (check.checked) {
    yes.innerHTML = "Yes"
  } else {
    yes.innerHTML = "No"
  }
}

请记住像这样实现您的 yes 元素

<p id="yes"></p> //tag name is your choice

从技术上讲，checked 是该输入上 value 属性的名称，它不是函数，因此您不能将其用作函数名称。

顺便说一下，感谢@Teemu 的建议!