How to call function in if statement - javascript

Question

I've got an interval set that I want to be cleared/end when someone hits a button called "Reset" this way the function to begin the interval is fresh and ready to accept new values.

How can this be done?

Here is my code:

<div class="grid">
  <div id="circle" class="center">
    <div id="timer" class="fl"></div>
      <div class="grid">
        <div class="col-1-2 center">
          <div class="circleSelect">
            <select id="min" class="fm">  
              <option value="0">0 minutes</option>
              <option value="300">5 minutes</option>
              <option value="600">10 minutes</option>
              <option value="900">15 minutes</option>
              <option value="1200">20 minutes</option>
              <option value="1500">25 minutes</option>
            </select>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="grid">
  <div class="col-1-3 center centerText prZ ptm">

    <div id="begin">
    <a class="btn fm" onClick="begin()">Begin Meditation</a>
    </div>

    <div id="during" class="opacity">
    <a class="btn fm black" onClick="stop()">Pause</a>
    <a class="btn fm red" onClick="resetTime()">Reset</a>
    <a class="btn fm red" onClick="finish()">Finish Test</a>
    </div>

    <div id="finish" class="centerText ptm grid opacity">
      <div id="quote" class="pbm col-1-2 center">
          <p class="centerText fm">"Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment."
           <p class="fm">- Buddha</p>
          </p>
        </div>
        <a id="again" class="btn fm" onClick="again()">Meditate Again</a>

    </div>

  </div>

  <audio id="soundName" style="display: none;"></audio>
</div>
<script>

  function begin() {

    var min = parseInt($('#min').val(), 10);
    var sec = 1;
    var time = min + sec; 

    setInterval( function() {
      if (time > 0){
        --time;
      }
      else if(time == 0){
        time = -1;
        finish();
      }
    }, 1000);

    function convertTime() {
        var mins = Math.floor((min % 3600) / 60);
        var secs = (sec % 60);
        // return humanTime;

        if (mins >= 0){
        var timeTravel = setInterval( function() {
          --secs;

        if (secs == -1 && min > 0){secs = 59; --mins;}  // changes the minute 
        else if (secs == 0 && min == 0) {clearInterval(timeTravel);} // stops at 00:00


        var humanTime = (((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
        $('#timer').html(humanTime).fadeIn(200);
        }, 1000); 
      } else {}

    }

    convertTime();

    $('#begin').fadeToggle(200);
    $('.selectStyle').fadeToggle(200);
    $('.circleSelect').fadeToggle(200);
    $('#during').delay(200).fadeToggle(400);

  }

  function stop() {

  }


  function resetTime(interval) {
    $('#during').fadeToggle(200);
    $('#begin').delay(200).fadeToggle(400);
    $('.selectStyle').fadeToggle(200);

    var interval = clearInterval(timeTravel);

    resetTime();
  }


  function finish() {


    $('#during').fadeOut(200);
    $('#circle').fadeOut(500);

    $('#finish').insertAfter('#circle').delay(1000).fadeToggle(400);
  }

  function again() {
    $('#finish').fadeOut(200);
    $('#begin').delay(200).fadeToggle(200);
    $('#circle').delay(200).fadeToggle(400);
    $('.selectStyle').fadeToggle(200);

  }


</script>

You need to declare var timeTravel global, you can only access it inside the scope of your convertTime function — juvian
– juvian, Commented Apr 19, 2014 at 22:12

Mattias Buelens · Accepted Answer · 2014-04-19 22:14:52Z

1

The problem is that timeTravel is local to convertTime, so timeTravel inside resetTime refers to a different (in this case, undefined) variable.

Move its declaration outside of that function so both functions can access it, and remove the var for that variable within those functions:

<script>
var timeTravel;

function convertTime() {
    // ...
    timeTravel = setInterval( /* ... */ );
    // ...
}

function resetTime() {
    // ...
    clearInterval(timeTravel);
    // ...
}
</script>

answered Apr 19, 2014 at 22:14

Mattias Buelens

20.2k4 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2014-04-19 22:15:18Z

0

You have declared the timeTravel variable as local inside the convertTime function, which means that it goes away when you exit the function.

Declare the variable outside the begin function, and just leave the assignment inside the convertTime function. That way you can use the variable inside the resetTime function to stop the interval.

answered Apr 19, 2014 at 22:15

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Jack · Accepted Answer · 2014-04-19 23:40:07Z

0

`timeTravel()` should be in the global scope.

function convertTime() {
        if (/* code */){
            window.timeTravel = setInterval( function(/* code */) {
        }
}

OR

var timeTravel = '';
function convertTime() {
        if (/* code */){
            timeTravel = setInterval( function(/* code */) {
        }
}

answered Apr 19, 2014 at 23:40

Jack

1,9411 gold badge19 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to call function in if statement - javascript

3 Answers 3

Comments

Comments

`timeTravel()` should be in the global scope.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

timeTravel() should be in the global scope.

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`timeTravel()` should be in the global scope.