Button onclick performing multiple actions

Question

I have this code:

var hour = parseInt(js_arr[j].substring(0, 1));
var min = parseInt(js_arr[j].substring(3, 4));
var seconds = parseInt(js_arr[j].substring(6, 7));
var mil_sec = parseInt(js_arr[j].substring(9, 11));
var time = (hour * 3600000) + (min * 60000) + (seconds * 1000) + mil_sec;

function timeout() {
    setTimeout(function () {

        if (true) {
            document.getElementById('subs').innerHTML = js_arr[i];
            i = i + 4;
            j = j + 4;
            hour = parseInt(js_arr[j].substring(0, 1));
            min = parseInt(js_arr[j].substring(3, 4));
            seconds = parseInt(js_arr[j].substring(6, 7));
            mil_sec = parseInt(js_arr[j].substring(9, 11));
            time = (hour * 3600000) + (min * 60000) + (seconds * 1000) + mil_sec;

            timeout();
        } else {
            timeout();
        }

    }, time);
}

Before javascript code I have an onclick="timeout(); button.

This button allows subtitles to play. What I would also like it to do is to stop these subtitles from playing by clicking on that same button. It would be great if someone could help!

Thanks a lot.

Probably a toggle logic will help? http://stackoverflow.com/questions/3047755/i-am-trying-to-make-a-simple-toggle-button-in-javascript — Geordee Naliyath, Mar 07 '14 at 12:39

score 0 · Accepted Answer · answered Mar 07 '14 at 12:39

Add a variable that indicates whether the timeout is active. In the timeout()-function, this variable is checked and another loop is only initiated when it is true. To Start and Stop you simply set (and call timeout()) or reset the variable.

var hour = parseInt(js_arr[j].substring(0,1));
var min = parseInt(js_arr[j].substring(3,4));
var seconds = parseInt(js_arr[j].substring(6,7));
var mil_sec = parseInt(js_arr[j].substring(9,11));
var time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec;

var timeOutRunning = false;

function startTimeOut() {
  timeOutRunning = true;
  timeout();
}

function stopTimeOut() {
  timeOutRunning = false;
}

function timeout() {
  if(timeOutRunning) {
    setTimeout(function() {
      document.getElementById('subs').innerHTML = js_arr[i];
      i=i+4;
      j=j+4;
      hour = parseInt(js_arr[j].substring(0,1));
      min = parseInt(js_arr[j].substring(3,4));
      seconds = parseInt(js_arr[j].substring(6,7));
      mil_sec = parseInt(js_arr[j].substring(9,11));
      time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec;

      timeout();
    }, time);
  }
}

And then the onclick-function:

onclick="if(timeOutRunning) { stopTimeOut(); } else { startTimeOut(); }"

This code looks perfect though I think I know why it still won't work. That won't let me change it. Even when I deleted this line with the button, the button is still there. Any ideas why this is happening? — user3364728, Mar 07 '14 at 12:56
No, that must be a completely unrelated problem. Did you save your document? Are you developing local, but viewing it online and forgot to upload it? Cache-Problems? — Merlin Denker, Mar 07 '14 at 14:49
It's okay, it actually helped me solve the main problem I had, thanks so much, you have no idea how happy I am with this code! :) — user3364728, Mar 07 '14 at 14:59

Button onclick performing multiple actions

1 Answers1