2

I've had a problem where I wrote a checked() function for the onchange of a checkbox:

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

Here's my javascript:

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

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

Basically I want the span with the class of yes to change output depending on if the checkbox is checked or not (Says Yes or No) However, when I inspect, it says "TypeError: checked is not a function at HTMLInputElement.onchange" even though my javascript is perfectly linked to my HTML (I checked this with an alert).

How can I solve this?

Nico Asseo
  • 55
  • 7
  • your element id is "checked" not "checkbox". You should not use property names as a property values that could lead to confusion. – A.T. Mar 14 '22 at 10:52
  • 2
    The error is due to the way inline listeners are handled (`checked` [refers to the `checked` property](https://stackoverflow.com/a/63119431/1169519) of the checkbox element). Change the name of the function. There will be more errors, though. – Teemu Mar 14 '22 at 10:52

2 Answers2

2

You're getting checkbox by id checkbox, but in your input field, you put id="checked" which is incorrect, so you need to correct your id from checked to checkbox.

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

You also need to change your function name from checked to another name (like checkData which is not similar with native values/functions) and then wrap your document.getElementById into your function

You should not use getElementsByClassName too, because it returns a list of elements and innerHTML does not work for those, so you need to select a particular element with 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"
  }
}

Remember to implement your yes element like this

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

Technically, checked is the name of the value attribute on that input and it's not a function, so you cannot use it as a function name.

By the way, thank @Teemu for the suggestion!

Nick Vu
  • 14,512
  • 4
  • 21
  • 31
  • Thanks for that good catch! I didn't test it, but after you mentioned it, I tried and modified it accordingly! Hopefully, this time it's all good! @Teemu – Nick Vu Mar 14 '22 at 11:23
  • 1
    Yup, you also can get an individual element by classname by using `document.querySelector('.yes)`, if the use of the classname feels important. BTW. The onchange attribute is not yet fixed in your code, it's still `checked()`. – Teemu Mar 14 '22 at 11:26
  • Hello, now that i've modified my code, it says: "TypeError: Cannot set properties of null (setting 'innerHTML') at isChecked (script.js:5:19) at HTMLInputElement.onchange ((index):43:11)" now that i've changed my functio name to isChecked() – Nico Asseo Mar 14 '22 at 13:47
  • You need to have `

    ` in your HTML too. You can use any tag but `id="yes"` @NicoAsseo     – Nick Vu Mar 14 '22 at 13:49
  • Is it ok if this element is on another file? I'm working on forms with python and php right now. By the way, i've linked both files to the script.js – Nico Asseo Mar 14 '22 at 13:53
  • Yupp it should be fine, but if you're still worried about it, you can add `if(!yes) { return; }` (If that yes element is not there, you can skip `innerHTML` logic). By the way, I updated my answer too for your case @NicoAsseo – Nick Vu Mar 14 '22 at 13:55
0

const check = document.getElementById("checkbox")

There is no such ID in your code named "checkbox". I think you want:

const check = document.getElementById("checked")

Try giving your IDs, function names and input-types unique names so you won't get them mixed up with each other.

Rani Giterman
  • 708
  • 2
  • 6
  • 17