JS button click counter with timer and input-select form

Question

First of all, I am really new to JS and jQuery. The following is an idea of my 11-year-old son what I try to realize:

A "click the button" counter which runs a defined time which is given by an input-form select value.

My goal is, that if the select-value is chosen, the value should be directly available and used in the timer function which starts if the button is clicked... If nothing is selected, the timer should use the pre-selected value of the select-form.

Here is what I have:

$("#mySelect").on("change", function() {
  //Getting Value
  var selValue = $("#mySelect").val();
  //Setting Value
  $("#mySelectedValue").val(selValue);
  console.log(selValue);
});

var running = false,
  count = 0,
  //run_for = 5000; // 1000 = 1 Second
  run_for = $("#mySelect").val();

var seconds = (run_for / 1000);

var end_counter = function() {
  if (running) {
    running = false;
    $("#status").text("Click and go!");
    alert("Clicks: " + count);
    started_at = 0;
  }
};

$('button').click(function() {
  if (running) {
    count++;
    var clickspersecond = (count / (run_for / 1000));
    $("#seconds").text(seconds);
    $("#clicks").text(count);
    $("#cps").text(clickspersecond);

  } else {
    running = true;
    $("#status").text("Time is running...");
    count = 1;
    setTimeout(end_counter, run_for);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button>Click me</button>

<div id="status">Click and go...</div>
<p>Timer: <span id="seconds"></span></p>
<p>Clicks: <span id="clicks"></span></p>
<p>Clicks per second: <span id="cps"></span></p>
</div>

<select id="mySelect" class="form-control">
  <option value="3000" selected>3 Seconds</option>
  <option value="4000">4 Seconds</option>
  <option value="5000">5 Seconds</option>
  <option value="6000">6 Seconds</option>
</select>

<input type="text" id="mySelectedValue" class="form-control" placeholder="get value of mySelect form">

Answer 1

You need to update run_for & seconds value each time from else {} code. Also added new function updateTimer which will set timer value and call itself again after every 1 seconds until seconds >= 0.

run_for = $("#mySelect").val(); // Update run_for value
seconds = (run_for / 1000); // Update seconds value   
updateTimer(); // Call updateTimer function.

Try it below.

$("#mySelect").on("change", function() {
  //Getting Value
  var selValue = $("#mySelect").val();
  //Setting Value
  $("#mySelectedValue").val(selValue);
  console.log(selValue);
});

var running = false,
  count = 0,
  //run_for = 5000; // 1000 = 1 Second
  run_for = $("#mySelect").val();

var seconds = (run_for / 1000);

var end_counter = function() {
  if (running) {
    running = false;
    $("#status").text("Click and go!");
    alert("Clicks: " + count);
    started_at = 0;
  }
};

function updateTimer() {
  // set seconds
  $("#seconds").text(seconds);
  seconds--;
  // if running = true and seconds >= 0 then reinvole this function after 1 second.
  if (running && seconds >= 0) {
    setTimeout(updateTimer, 1000);
  }
}

$('button').click(function() {
  if (running) {
    count++;
    var clickspersecond = (count / (run_for / 1000));
    $("#clicks").text(count);
    $("#cps").text(clickspersecond);

  } else {
    running = true;
    $("#status").text("Time is running...");
    count = 1;
    run_for = $("#mySelect").val(); // Update run_for value
    seconds = (run_for / 1000); // Update seconds value    
    updateTimer(); // Call updateTimer function.
    setTimeout(end_counter, run_for);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button>Click me</button>

<div id="status">Click and go...</div>
<p>Timer: <span id="seconds"></span></p>
<p>Clicks: <span id="clicks"></span></p>
<p>Clicks per second: <span id="cps"></span></p>
</div>

<select id="mySelect" class="form-control">
  <option value="3000" selected>3 Seconds</option>
  <option value="4000">4 Seconds</option>
  <option value="5000">5 Seconds</option>
  <option value="6000">6 Seconds</option>
</select>

<input type="text" id="mySelectedValue" class="form-control" placeholder="get value of mySelect form">