Press and hold button and change query selector

Question

based on the question press and hold button javascript and the fiddle http://jsfiddle.net/0bs3omjj/1/ i want to change the code to another scenario. I want to check if button1 is onmousedown - hold - onmouseup and if so... the query selector should change to the next button

I tried this

<div id="myDIV">
<button class="myButton">button 1</button>
<button class="myButton">button 2</button>
<button class="myButton">button 3</button>
<button class="myButton">button 4</button>
</div>

And JavaScript

var mouse_is_down = false;
var current_i = 0;    
var buttoncounter = 1;
var button = "";
var buttoncount = 0;

function changebutton() {
 var x = document.getElementById("myDIV").querySelectorAll(".myButton");
 x[buttoncount].style.backgroundColor = "red";
 button = x[buttoncount];
 buttoncount++;
}

changebutton();

button.onmousedown = function(){
 mouse_is_down = true;
 console.log("mousedown" + buttoncounter);

setTimeout(
    (function(index){
        return function(){
            if(mouse_is_down && current_i === index){
                //do thing when hold
                console.log("hold" + buttoncounter);
                console.log(button);

            }
        };
    })(++current_i), 500); // time you want to hold before fire action
};

button.onmouseup = function(){
 mouse_is_down = false;
 current_i++;

 console.log("onmouseup" + buttoncounter);

 console.log("change selector");
 buttoncounter++;
 changebutton();
 console.log(button); 

};

But the query selector responds only on the first button (click & hold) - but the javascript changes the color values from the other buttons. What is wrong?

Answer 1

First of all, don't use the same ID multiple times.

Second, you're on the right path, but simply put the onmouseup and other calls within your changebutton() function:

Your HTML:

<div id="myDIV">
  <button class="myButton">button 1</button>
  <button class="myButton">button 2</button>
  <button class="myButton">button 3</button>
  <button class="myButton">button 4</button>
</div>

Your Javascript:

var mouse_is_down = false;
var current_i = 0;    
var buttoncounter = 1;
var button = "";
var buttoncount = 0;

function changebutton() {
  var x = document.getElementById("myDIV").querySelectorAll(".myButton");
  x[buttoncount].style.backgroundColor = "red";
  button = x[buttoncount];
  button.onmousedown = function(){
  mouse_is_down = true;

  setTimeout(
    (function(index){
      return function(){
        if(mouse_is_down && current_i === index){
          //do thing when hold
          console.log("hold" + buttoncounter);
          console.log(button);

        }
      };
    })(++current_i), 500); // time you want to hold before fire action
  };

  button.onmouseup = function(){
    mouse_is_down = false;
    current_i++;
    buttoncounter++;
    changebutton();
  };
  buttoncount++;
}

changebutton();