title: JS button click counter with timer and input-select form
body: <p>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:</p>
  <p><strong>A &quot;click the button&quot; counter which runs a defined time which is given by an input-form select value.</strong></p>
  <p>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.</p>
  <p>Here is what I have:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#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);
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button&gt;Click me&lt;/button&gt;
  
  &lt;div id="status"&gt;Click and go...&lt;/div&gt;
  &lt;p&gt;Timer: &lt;span id="seconds"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Clicks: &lt;span id="clicks"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Clicks per second: &lt;span id="cps"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;select id="mySelect" class="form-control"&gt;
    &lt;option value="3000" selected&gt;3 Seconds&lt;/option&gt;
    &lt;option value="4000"&gt;4 Seconds&lt;/option&gt;
    &lt;option value="5000"&gt;5 Seconds&lt;/option&gt;
    &lt;option value="6000"&gt;6 Seconds&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type="text" id="mySelectedValue" class="form-control" placeholder="get value of mySelect form"&gt;</code></pre>
  </div>
  </div>
  </p>