CODEWITHSUNDEEP
javascripthtml
lairom
lairom

Reputation: 1

How to set / change the step manually in a metronome counter

How to manually insert a new value when the counter is stopped, then when I restart the metronome the counter starts from that step?

var inc = 0;//step

    function counter()
    {	
	    if(inc < 9){inc = inc+1;}
	    else {inc = 0;}
	    document.getElementById('btn1').value = inc; //display step
    }

    function metronome()
    {
        //setInterval(function, delay)	
        autoplay = window.setInterval(counter, 
        document.getElementById('btn2').value);
    }
    <div><p>metronome speed</p>
    <input type="number" min="0" max="10000" value="500" id="btn2">ms</input>
    <button onclick="metronome()">start</button>
    <button onclick="window.clearInterval(autoplay)">stop</button>
    </div>

	<div><p>counter</p>
    <input type="number" min="0" max="9" value="0" id="btn1">       
    </div>

Upvotes: 0

Views: 45

Answers (1)

Krishanu
Krishanu

Reputation: 562

Change your javascript code to this

var inc = 0;
function counter() {
  if (inc < 9) {
    inc = inc + 1;
  } else {
    inc = 0;
  }
  document.getElementById("btn1").value = inc; //display step
}

function metronome() {
  autoplay = window.setInterval(counter, document.getElementById("btn2").value);
}

document.getElementById("btn1").addEventListener("input", e => {
  inc = parseInt(e.target.value);
});
<div><p>metronome speed</p>
  <input type="number" min="0" max="10000" value="500" id="btn2">ms</input>
  <button onclick="metronome()">start</button>
  <button onclick="window.clearInterval(autoplay)">stop</button>
  </div>

<div><p>counter</p>
  <input type="number" min="0" max="9" value="0" id="btn1">       
  </div>

  <script src="main.js"></script>

What this will do is when you change the value of the second input btn1 ( which display the value of inc), it will set its value to inc.

Upvotes: 1

Related Questions