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?
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!
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.