Click event and value

by kmouse

HTML

<label><input type="checkbox">Press me</label>

<div id="mouseup">Mouse up</div>
<div id="click">Click</div>
<div id="input">Input</div>
<div id="change">Change</div>

JavaScript

const input = document.querySelector("input");

input.addEventListener("mouseup", (event) => {
  document.getElementById("mouseup").textContent = `Value: ${event.target.checked}`;
});
input.addEventListener("click", (event) => {
	// Try commenting out the next line
  event.preventDefault();
  document.getElementById("click").textContent = `Value: ${event.target.checked}`;
});
input.addEventListener("input", (event) => {
  document.getElementById("input").textContent = `Value: ${event.target.checked}`;
});
input.addEventListener("change", (event) => {
  document.getElementById("change").textContent = `Value: ${event.target.checked}`;
});