2

How can I do a addEventListener to my project for a checkbox? I need to be able to have it update (run) a function automatically when it is unchecked and checked. I accomplished this via radio buttons, but for this final matter I need a checkbox. Here's my code.

HTML

<html>
  <body>
    <div class="date">
      <h2>Time</h2>
      <br>
      <p id="time"></p>
      <br>
      <h2>Time Period Ends</h2>
      <br>
      <p id="time2">%TIME_PERIOD_ENDS%</p>
    </div>
    <div class="select">
      <input id="p1" class="radio" type="radio" name="period"  value="period1">Period 1
      <input id="p2" class="radio" type="radio" name="period"  value="period2">Period 2
      <input id="p3" class="radio" type="radio" name="period" value="period3">Period 3
      <input id="p41" class="radio" type="radio" name="period" value="period4">4(1)
      <input id="p42" class="radio" type="radio" name="period"  value="period4">4(2)
      <input id="p51" class="radio" type="radio" name="period" value="period5">5(1)
      <input id="p52" class="radio" type="radio" name="period"  value="period5">5(2)
      <input id="p61" class="radio" type="radio" name="period" value="period6">6(1)
      <input id="p62" class="radio" type="radio" name="period" value="period6">6(2)
      <input id="p7" class="radio" type="radio" name="period"  value="period7">Period 7
      <input id="p8" class="radio" type="radio" name="period"  value="period8">Period 8
      <br>
      <input id="nday" class="radio" type="radio" name="day" value="normal">Regular Day
      <input id="tday" class="radio" type="radio" name="day" value="thursday">Thursday
      <input id="reg" class="radio" type="radio" name="day" value="regularMon">Regular Monday
      <input id="full" class="radio" type="radio" name="day" value="fullMon">Full Monday
      <br>
      <input id="2hr" class="radio" type="checkbox" name="2hr" value="2hrDelay">2 Hour Delay
    </div>
  </body>
</html>

CSS

.date, h2 p  {
  text-align: center;
  font-size: 200%;
  padding: 0;
  margin: 0;
}
.date h2  {
  margin: 0;
  padding: 0;
}
.date p  {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(#101010, #151515, #101010);
  border: 1px solid red;
  color: white;
  width: 875px;
  font-size: 225%;
}
.select  {
  text-align: center;
  font-family: arial;
  font-size: 125%;
  margin: 0;
  margin-top: 25px;
  padding: 0;
}
#instruct  {
  float: left;
  font-family: arial;
  font-size: 110%;
  display: inline-block;
  width: 169px;
  position: relative;
  bottom: 400px;
  padding-top: 10px;
  margin: 0;
  border: 2px solid #000;
  border-radius: 3px;
}
h4  {
  margin: 0;
  padding: 0;
}

JavaScript

var setTime = setInterval(function() {
  clock()
}, 1000)

function clock() {
  var d = new Date();
  d.setMinutes(d.getMinutes() + 1); // Add 2 minutes
  document.getElementById("time").innerHTML = d.toLocaleTimeString();
}
window.onload = function()  {
  clock();
}
var ringerTime = function()  {
  var mark = document.getElementById("time2");
  var norm = document.getElementById("nday");
  var thur = document.getElementById("tday");
  var redN = document.getElementById("reg");
  var redF = document.getElementById("full");
  var delay = document.getElementById("2hr");
  var period1 = document.getElementById("p1");
  var period2 = document.getElementById("p2");
  var period3 = document.getElementById("p3");
  var period41 = document.getElementById("p41");
  var period42 = document.getElementById("p42");
  var period51 = document.getElementById("p51"); 
  var period52 = document.getElementById("p52");
  var period61 = document.getElementById("p61");
  var period62 = document.getElementById("p62");
  var period7 = document.getElementById("p7");
  var period8 = document.getElementById("p8");
  console.log(period1.checked);
  console.log(norm);
  if(period1.checked && norm.checked)  {
    mark.innerHTML = "8:56:00 AM";
  }
  else if(period1.checked && thur.checked)  {
    mark.innerHTML = "8:49:00 AM";
  }
  else if(period1.checked && redN.checked)  {
    mark.innerHTML = "8:53:00 AM";
  }
  else if(period1.checked && redF.checked)  {
    mark.innerHTML = "8:51:00 AM";
  }
  else if(period1.checked && delay.checked)  {
    mark.innerHTML = "10:38:00 AM";
  }
  if(period2.checked && norm.checked)  {
    mark.innerHTML = "9:46:00 AM";
  }
  else if(period2.checked && thur.checked)  {
    mark.innerHTML = "9:32:00 AM";
  }
  else if(period2.checked && redN.checked)  {
    mark.innerHTML = "9:40:00 AM";
  }
  else if(period2.checked && redF.checked)  {
    mark.innerHTML = "9:35:00 AM";
  }
  else if(period2.checked && delay.checked)  {
    mark.innerHTML = "11:10:00 AM";
  }
  if(period3.checked && norm.checked)  {
    mark.innerHTML = "10:36:00 AM";
  }
  else if(period3.checked && thur.checked)  {
    mark.innerHTML = "10:15:00 AM";
  }
  else if(period3.checked && redN.checked)  {
    mark.innerHTML = "10:27:00 AM"
  }
  else if(period3.checked && redF.checked)  {
    mark.innerHTML = "10:19:00 AM"
  }
  else if(period3.checked && delay.checked)  {
    mark.innerHTML = "2:18:00 PM"
  }
  if(period41.checked && norm.checked)  {
    mark.innerHTML = "11:26:00 AM"
  }
  else if(period41.checked && thur.checked)  {
    mark.innerHTML = "10:57:00 AM"
  }
  else if(period41.checked && redN.checked)  {
    mark.innerHTML = "11:14:00 AM"
  }
  else if(period41.checked && redF.checked)  {
    mark.innerHTML = "11:03:00 AM"
  }
  else if(period41.checked && delay.checked)  {
    mark.innerHTML = "11:51:00 AM"
  }
  if(period42.checked && norm.checked)  {
    mark.innerHTML = "12:00:00 PM";
  }
  else if(period42.checked && thur.checked)  {
    mark.innerHTML = "11:31:00 AM";
  }
  else if(period42.checked && redN.checked)  {
    mark.innerHTML = "11:48:00 AM";
  }
  else if(period42.checked && redF.checked)  {
    mark.innerHTML = "11:37:00 AM";
  }
  else if(period42.checked && delay.checked)  {
    mark.innerHTML = "12:25:00 PM"
  }
  if(period51.checked && norm.checked)  {
    mark.innerHTML = "12:15:00 PM"
  }
  else if(period51.checked && thur.checked)  {
    mark.innerHTML = "11:29:00 AM"
  }
  else if(period51.checked && redN.checked)  {
    mark.innerHTML = "12:01:00 PM"
  }
  else if(period51.checked && redF.checked)  {
    mark.innerHTML = "11:47:00 AM"
  }
  else if(period51.checked && delay.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  if(period52.checked && norm.checked)  {
    mark.innerHTML = "12:50:00 PM";
  }
  else if(period52.checked && thur.checked)  {
    mark.innerHTML = "12:13:00 PM";
  }
  else if(period52.checked && redN.checked)  {
    mark.innerHTML = "12:35:00 PM";
  }
  else if(period52.checked && redF.checked)  {
    mark.innerHTML = "12:21:00 PM";
  }
  else if(period52.checked && delay.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  if(period61.checked && norm.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  else if(period61.checked && thur.checked)  {
    mark.innerHTML = "12:31:00 PM";
  }
  else if(period61.checked && redN.checked)  {
    mark.innerHTML = "12:48:00 PM";
  }
  else if(period61.checked && redF.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  else if(period61.checked && delay.checked)  {
    mark.innerHTML = "1:13:00 PM"
  }
  if(period62.checked && norm.checked)  {
    mark.innerHTML = "1:40:00 PM";
  }
  else if(period62.checked && thur.checked)  {
    mark.innerHTML = "12:55:00 PM";
  }
  else if(period62.checked && redN.checked)  {
    mark.innerHTML = "1:22:00 PM"
  }
  else if(period62.checked && redF.checked)  {
    mark.innerHTML = "1:09:00 PM"
  }
  else if(period62.checked && delay.checked)  {
    mark.innerHTML = "1:47:00 PM"
  }
  if(period7.checked && norm.checked)  {
    mark.innerHTML = "2:30:00 PM";
  }
  else if(period7.checked && thur.checked)  {
    mark.innerHTML = "1:37:00 PM";
  }
  else if(period7.checked && redN.checked)  {
    mark.innerHTML = "2:09:00 PM";
  }
  else if(period7.checked && redF.checked)  {
    mark.innerHTML = "1:51:00 PM";
  }
  else if(period7.checked && delay.checked)  {
    mark.innerHTML = "2:49:00 PM"
  }
  if(period8.checked && norm.checked)  {
    mark.innerHTML = "3:20:00 PM";
  }
  else if(period8.checked && thur.checked)  {
    mark.innerHTML = "2:20:00 PM";
  }
  else if(period8.checked && redN.checked)  {
    mark.innerHTML = "2:56:00 PM";
  }
  else if(period8.checked && redF.checked)  {
    mark.innerHTML = "2:35:00 PM";
  }
  else if(period8.checked && delay.checked)  {
    mark.innerHTML = "3:20:00 PM"
  }
}
window.onload = function()  {
  clock();
  document.getElementById("p1").checked = true;
  document.getElementById("nday").checked = true;
  ringerTime();
};
document.getElementById("p1").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p2").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p3").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p41").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p42").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p51").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p52").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p61").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p62").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p7").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p8").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("full").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("nday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("tday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("reg").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("2hr").addEventListener("change", function()  {
  check();
  ringerTime();
});

What I tried

I tried adding a function that triggers with a eventlistener on a label (solution from this question), but it doesn't seem to work.

Things to note

Please keep it in JavaScript, I am unaware of jQuery... yet.

Code Snippet

var setTime = setInterval(function() {
  clock()
}, 1000)

function clock() {
  var d = new Date();
  d.setMinutes(d.getMinutes() + 1); // Add 2 minutes
  document.getElementById("time").innerHTML = d.toLocaleTimeString();
}
window.onload = function()  {
  clock();
}
var ringerTime = function()  {
  var mark = document.getElementById("time2");
  var norm = document.getElementById("nday");
  var thur = document.getElementById("tday");
  var redN = document.getElementById("reg");
  var redF = document.getElementById("full");
  var delay = document.getElementById("2hr");
  var period1 = document.getElementById("p1");
  var period2 = document.getElementById("p2");
  var period3 = document.getElementById("p3");
  var period41 = document.getElementById("p41");
  var period42 = document.getElementById("p42");
  var period51 = document.getElementById("p51"); 
  var period52 = document.getElementById("p52");
  var period61 = document.getElementById("p61");
  var period62 = document.getElementById("p62");
  var period7 = document.getElementById("p7");
  var period8 = document.getElementById("p8");
  console.log(period1.checked);
  console.log(norm);
  if(period1.checked && norm.checked)  {
    mark.innerHTML = "8:56:00 AM";
  }
  else if(period1.checked && thur.checked)  {
    mark.innerHTML = "8:49:00 AM";
  }
  else if(period1.checked && redN.checked)  {
    mark.innerHTML = "8:53:00 AM";
  }
  else if(period1.checked && redF.checked)  {
    mark.innerHTML = "8:51:00 AM";
  }
  else if(period1.checked && delay.checked)  {
    mark.innerHTML = "10:38:00 AM";
  }
  if(period2.checked && norm.checked)  {
    mark.innerHTML = "9:46:00 AM";
  }
  else if(period2.checked && thur.checked)  {
    mark.innerHTML = "9:32:00 AM";
  }
  else if(period2.checked && redN.checked)  {
    mark.innerHTML = "9:40:00 AM";
  }
  else if(period2.checked && redF.checked)  {
    mark.innerHTML = "9:35:00 AM";
  }
  else if(period2.checked && delay.checked)  {
    mark.innerHTML = "11:10:00 AM";
  }
  if(period3.checked && norm.checked)  {
    mark.innerHTML = "10:36:00 AM";
  }
  else if(period3.checked && thur.checked)  {
    mark.innerHTML = "10:15:00 AM";
  }
  else if(period3.checked && redN.checked)  {
    mark.innerHTML = "10:27:00 AM"
  }
  else if(period3.checked && redF.checked)  {
    mark.innerHTML = "10:19:00 AM"
  }
  else if(period3.checked && delay.checked)  {
    mark.innerHTML = "2:18:00 PM"
  }
  if(period41.checked && norm.checked)  {
    mark.innerHTML = "11:26:00 AM"
  }
  else if(period41.checked && thur.checked)  {
    mark.innerHTML = "10:57:00 AM"
  }
  else if(period41.checked && redN.checked)  {
    mark.innerHTML = "11:14:00 AM"
  }
  else if(period41.checked && redF.checked)  {
    mark.innerHTML = "11:03:00 AM"
  }
  else if(period41.checked && delay.checked)  {
    mark.innerHTML = "11:51:00 AM"
  }
  if(period42.checked && norm.checked)  {
    mark.innerHTML = "12:00:00 PM";
  }
  else if(period42.checked && thur.checked)  {
    mark.innerHTML = "11:31:00 AM";
  }
  else if(period42.checked && redN.checked)  {
    mark.innerHTML = "11:48:00 AM";
  }
  else if(period42.checked && redF.checked)  {
    mark.innerHTML = "11:37:00 AM";
  }
  else if(period42.checked && delay.checked)  {
    mark.innerHTML = "12:25:00 PM"
  }
  if(period51.checked && norm.checked)  {
    mark.innerHTML = "12:15:00 PM"
  }
  else if(period51.checked && thur.checked)  {
    mark.innerHTML = "11:29:00 AM"
  }
  else if(period51.checked && redN.checked)  {
    mark.innerHTML = "12:01:00 PM"
  }
  else if(period51.checked && redF.checked)  {
    mark.innerHTML = "11:47:00 AM"
  }
  else if(period51.checked && delay.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  if(period52.checked && norm.checked)  {
    mark.innerHTML = "12:50:00 PM";
  }
  else if(period52.checked && thur.checked)  {
    mark.innerHTML = "12:13:00 PM";
  }
  else if(period52.checked && redN.checked)  {
    mark.innerHTML = "12:35:00 PM";
  }
  else if(period52.checked && redF.checked)  {
    mark.innerHTML = "12:21:00 PM";
  }
  else if(period52.checked && delay.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  if(period61.checked && norm.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  else if(period61.checked && thur.checked)  {
    mark.innerHTML = "12:31:00 PM";
  }
  else if(period61.checked && redN.checked)  {
    mark.innerHTML = "12:48:00 PM";
  }
  else if(period61.checked && redF.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  else if(period61.checked && delay.checked)  {
    mark.innerHTML = "1:13:00 PM"
  }
  if(period62.checked && norm.checked)  {
    mark.innerHTML = "1:40:00 PM";
  }
  else if(period62.checked && thur.checked)  {
    mark.innerHTML = "12:55:00 PM";
  }
  else if(period62.checked && redN.checked)  {
    mark.innerHTML = "1:22:00 PM"
  }
  else if(period62.checked && redF.checked)  {
    mark.innerHTML = "1:09:00 PM"
  }
  else if(period62.checked && delay.checked)  {
    mark.innerHTML = "1:47:00 PM"
  }
  if(period7.checked && norm.checked)  {
    mark.innerHTML = "2:30:00 PM";
  }
  else if(period7.checked && thur.checked)  {
    mark.innerHTML = "1:37:00 PM";
  }
  else if(period7.checked && redN.checked)  {
    mark.innerHTML = "2:09:00 PM";
  }
  else if(period7.checked && redF.checked)  {
    mark.innerHTML = "1:51:00 PM";
  }
  else if(period7.checked && delay.checked)  {
    mark.innerHTML = "2:49:00 PM"
  }
  if(period8.checked && norm.checked)  {
    mark.innerHTML = "3:20:00 PM";
  }
  else if(period8.checked && thur.checked)  {
    mark.innerHTML = "2:20:00 PM";
  }
  else if(period8.checked && redN.checked)  {
    mark.innerHTML = "2:56:00 PM";
  }
  else if(period8.checked && redF.checked)  {
    mark.innerHTML = "2:35:00 PM";
  }
  else if(period8.checked && delay.checked)  {
    mark.innerHTML = "3:20:00 PM"
  }
}
window.onload = function()  {
  clock();
  document.getElementById("p1").checked = true;
  document.getElementById("nday").checked = true;
  ringerTime();
};
document.getElementById("p1").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p2").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p3").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p41").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p42").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p51").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p52").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p61").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p62").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p7").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p8").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("full").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("nday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("tday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("reg").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("2hr").addEventListener("change", function()  {
  check();
  ringerTime();
});
.date, h2 p  {
  text-align: center;
  font-size: 200%;
  padding: 0;
  margin: 0;
}
.date h2  {
  margin: 0;
  padding: 0;
}
.date p  {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(#101010, #151515, #101010);
  border: 1px solid red;
  color: white;
  width: 875px;
  font-size: 225%;
}
.select  {
  text-align: center;
  font-family: arial;
  font-size: 125%;
  margin: 0;
  margin-top: 25px;
  padding: 0;
}
#instruct  {
  float: left;
  font-family: arial;
  font-size: 110%;
  display: inline-block;
  width: 169px;
  position: relative;
  bottom: 400px;
  padding-top: 10px;
  margin: 0;
  border: 2px solid #000;
  border-radius: 3px;
}
h4  {
  margin: 0;
  padding: 0;
}
<html>
  <body>
    <div class="date">
      <h2>Time</h2>
      <br>
      <p id="time"></p>
      <br>
      <h2>Time Period Ends</h2>
      <br>
      <p id="time2">%TIME_PERIOD_ENDS%</p>
    </div>
    <div class="select">
      <input id="p1" class="radio" type="radio" name="period"  value="period1">Period 1
      <input id="p2" class="radio" type="radio" name="period"  value="period2">Period 2
      <input id="p3" class="radio" type="radio" name="period" value="period3">Period 3
      <input id="p41" class="radio" type="radio" name="period" value="period4">4(1)
      <input id="p42" class="radio" type="radio" name="period"  value="period4">4(2)
      <input id="p51" class="radio" type="radio" name="period" value="period5">5(1)
      <input id="p52" class="radio" type="radio" name="period"  value="period5">5(2)
      <input id="p61" class="radio" type="radio" name="period" value="period6">6(1)
      <input id="p62" class="radio" type="radio" name="period" value="period6">6(2)
      <input id="p7" class="radio" type="radio" name="period"  value="period7">Period 7
      <input id="p8" class="radio" type="radio" name="period"  value="period8">Period 8
      <br>
      <input id="nday" class="radio" type="radio" name="day" value="normal">Regular Day
      <input id="tday" class="radio" type="radio" name="day" value="thursday">Thursday
      <input id="reg" class="radio" type="radio" name="day" value="regularMon">Regular Monday
      <input id="full" class="radio" type="radio" name="day" value="fullMon">Full Monday
      <br>
      <input id="2hr" class="radio" type="checkbox" name="2hr" value="2hrDelay">2 Hour Delay
    </div>
    <div id="instruct">
      Instructions:
      Load the page.
      The Upper Time is equilivant to the current time. The Lower time is equilevant to the time the period ends.
      <hr>
      Configure:
      Select the period and the day for the time to update. For example, if it's a Wednesday and it's currently period 3, you'd select Period 3 and Normal Day. 
    </div>
  </body>
</html>

Improve this question

1 Answer 1

Reset to default
1

Assuming your HTML is:

<input type="checkbox" id="checkBoxField" name="checkBoxField"/>

Add the listener like this:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#checkBoxField').addEventListener('change', changeHandler);
});

Of course you will need to pass this into a function like:

function changeHandler(){
    if(nameOfField.checked){
        //do something
    }
    else{
        //do something else
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.