Javascript 按住按钮并更改查询选择器

基于这个问题，我想把代码改成另一个场景。我想检查一下按钮1是否在mousedown-hold-onmousedup上，如果是的话。。。查询选择器应更改为“下一步”按钮

我试过这个

<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>

---

但是查询选择器只在第一个按钮单击并按住时响应，但是javascript会更改其他按钮的颜色值。怎么了？

首先，不要多次使用同一个ID

其次，您走的是正确的道路，但只需在changebutton函数中调用onmouseup和其他调用：

您的HTML：

---

ID必须是唯一的。我想检查按钮1是否为onmousedown-hold-onmouseup，如果是这样。。。查询选择器应更改为“下一步”按钮，嗯？不知道你在说什么。投票以打字错误/暂时性的方式结束。在屋顶上大声说：id必须是唯一的。如果网站包含重复的id，浏览器应该停止呈现网站，这是他们学习的唯一方式。id在第一个函数changebutton中更改-具有相同id的所有按钮都被计算在内。。。如果函数被调用，x变量将被计数-但是，到目前为止它仍然有效，因为按钮的颜色已更改。。。但是我只能按第一个按钮…非常感谢你的帮助-我真的很倾听所有的评论-但是如果你一步一步地学习javascript，解决一些简单的问题会有点困难和沮丧。这很酷。下次，如果你得到SO的回复，试着调整你的问题。SO社区真的很有帮助，但如果你犯了错误也很清楚。我现在将编辑您的问题，以便您理解其含义。

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); 

};

<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>

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();