I'm trying to implement a like button into my site for some different pages and I'm using socket io so it updates for every user when the like button is pressed. I have a simple function of like() that emits liked which then makes a counter go up and displays on page. That's not the issue though. I decided to make a checkbox so I can do something when the checkbox is unliked. I have a function for that too that works. I just can't do something when it is unchecked. This is what I'm using to see if the checkbox is checked:
if(document.getElementById('like').checked) {
like()
}
This does nothing when it is checked though. I even tried to just replace like() with socket.emit('liked') but that didn't work either. What is the proper way of check if the checkbox is checked or not? (Preferably without Jquery)
Html file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="likes">Likes: </p>
<input type="checkbox" id="like"></input>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
if(document.getElementById('like').checked) {
like()
}
function like(){
socket.emit('liked');
}
function un_like(){
socket.emit('unliked');
}
socket.on('buttonUpdate', function(data){
document.getElementById("likes").innerHTML = 'Likes: ' + data;
});
</script>
</body>
</html>
add addEventListener to checkbox
var checkbox = document.querySelector("input[id=like]");
checkbox.addEventListener('change', function() {
if (this.checked) {
console.log("Checkbox is checked..");
} else {
console.log("Checkbox is not checked..");
}
});<input type="checkbox" id="like">Checkbox</input>Use onChange to handle this. Additional reading
<input type="checkbox" id="like" onChange="clickHandler(this)"></input>
function clickHandler(checkbox) {
if(checkbox.checked) {
like()
}
}
Sample code:
function clickHandler(checkbox) {
if(checkbox.checked) {
console.log('selected')
} else {
console.log('unselected')
}
}select / unselect: <input type="checkbox" id="like" onChange="clickHandler(this)"></input>