0

I have a script that I am using in conjunction with a PHP form. I am trying to get a counter field that I put on the form to count up by one second after the employee id field is filled out below is my code.

<script type="text/javascript">

var counter = 0;
var timer;
var employee = document.getElementsByName("employeeID")[0];

var employeeVal = document.getElementsByName("employeeID")[0].value;

employee.addEventListener("onchange", startCount);

function countUP () {
    counter = counter + 1; //increment the counter by 1
    document.getElementsByName("timer_container")[0].value = counter;
 }

 function startCount () {
    timer=setInterval('countUP()', 1000 );
 }

 function readonly() {
     document.getElementsByName("timer_container")[0].readOnly = true;
 }

</script>

I have tried different functions to see if the event listener was firing. I also tried using different events, onclick, onblur and have not had any luck. I've taken the timer function and set it to onload in the body tag directly on the HTML and that works. However I need this to be able to run as soon as someone enters info into the employee field.

Difster
  • 3,264
  • 2
  • 22
  • 32
George
  • 115
  • 2
  • 9
  • 1
    Please add the relevant HTML as well and where in the file is this script? Is it before or after the HTML? Are you getting errors in the Console? – Scott Marcus Feb 05 '18 at 21:51
  • shortcut for your code ... `var employeeVal = employee.val` - also, don't do `timer=setInterval('countUP()', 1000 );` ... do `timer=setInterval(countUP, 1000 );` – Jaromanda X Feb 05 '18 at 21:53

1 Answers1

5

First, don't use on in the event name when using .addEventListener. The on prefix is only for inline event binding with HTML event attributes (which is why it worked for you in <body onload=...>). Inline event HTML attributes shouldn't be used anymore anyway. So, your line should be:

employee.addEventListener("change", startCount);

And use the input event instead of the change event if you want it to fire as data is being entered.

employee.addEventListener("input", startCount);
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Don't forget to clear the previous `setInterval` before starting a new one. The `on` prefix isn't only for inline attributes, and they can be used where it makes sense to use them, though I'd prefer `addEventListener`. –  Feb 05 '18 at 21:56
  • @SkinnyPete Where else is `on` used but with inline event attributes? You can't just use them where you feel it makes sense to use them. And, inline attributes should always be avoided (read the link I posted). As for the `setInterval` comment, that's a good point, but a separate issue from the question being asked. – Scott Marcus Feb 05 '18 at 21:57
  • Changing it to "input" actually made it so that every key stroke would start it again. However employee.addEventListener("change", startCount); seemed to have done the trick. – George Feb 05 '18 at 21:58
  • @George Then, you should go back to `change`. You indicated that you wanted it to fire as soon as data was entered and that's when `input` fires. – Scott Marcus Feb 05 '18 at 21:59
  • Ah, may have misspoken. I needed the timer to start once the string finished being entered. Change worked in this case. Thanks! – George Feb 05 '18 at 22:02
  • @George You're welcome. Don't forget to up vote and mark as "the" answer. – Scott Marcus Feb 05 '18 at 22:02