Question

此Javascript代码中的变量表示按钮，一旦单击它们将触发函数中的动画以便稍后确定。要触发动画，需要单击所有5个按钮。这是我正在努力的部分。代码代表了迄今为止我能够做的最多（不是很好的javascript）。有人能指出我正确的方向来解决这个问题吗？

＆＃13;

"scope": "html"

＆＃13;

Answer 1

目前尚不清楚你想要什么。如果您希望在特定时间间隔内触发您的功能，则有一个js方法setInterval();。

例如：

var a = function(){
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
}
setInterval(a, 3000);

上面的代码每隔3秒触发一次。

Answer 2

您犯了一些拼写错误（例如，函数名称）。添加了可运行的代码。这里，所有按钮都调用相同的右键单击方法。希望这会帮助你开始。

var homework= document.getElementById("homerwork");
var teeth = document.getElementById("teeth");
var reading= document.getElementById("reading");
var stuff= document.getElementById("stuff");
var good= document.getElementById("good");

homework.addEventListener("click", rightclick);
teeth.addEventListener("click", rightclick);
reading.addEventListener("click", rightclick);
stuff.addEventListener("click", rightclick);
good.addEventListener("click", rightclick);

function rightclick () {
    alert('hi');
    // function that will trigger the animation
}

<html>
  <head>
    <title>Sample page</title>
  </head>

  <body>
    <div class="wrapper">
      <button id="homerwork">Homework</button>
      <button id="teeth">Teeth</button>
      <button id="reading">Reading</button>
      <button id="stuff">Stuff</button>
      <button id="good">good</button>
    </div>
  </body>
 </html>

Answer 3

在click事件处理程序中设置每个html元素的属性clicked。然后，检查每个按钮是否具有“已点击”属性，如果是，请调用rightClicks()

像

这样的东西

var ids = ['homework', 'teeth', 'etc'];

function rightClick(event) {
  event.target.clicked = true;
  var allClicked = true;
  for (var i = 0; i < ids.length; i++) {
    var el = document.getElementById(ids[i]);
    if (!document.getElementById(ids[i]).attr('checked')) {
      allClicked = false;
    }
  }
  if (allClicked) {
    rightClicks();
  }
}

Answer 4

我确定有一种更简单或更好的方法可以做到这一点，但是通过构建原始代码剪辑 - 首先修复拼写错误，第二次添加到rightclick（）函数 - 我创建了一个解决方案仅使用Vanilla JS。希望这能为您提供一些合作机会！

＆＃13;

var homework= document.getElementById("homerwork");
var teeth= document.getElementById("teeth");
var reading= document.getElementById("reading");
var stuff= document.getElementById("stuff");
var good= document.getElementById("good");
	
homework.addEventListener("click", rightclick);
teeth.addEventListener("click", rightclick);
reading.addEventListener("click", rightclick);
stuff.addEventListener("click", rightclick);
good.addEventListener("click", rightclick);

function rightclick () {
  this.setAttribute("clicked", true);
  var buttons = document.getElementsByClassName("btns");
  var numButtons = buttons.length;
  var boolArray = [];
  for(var key in buttons){
    if(buttons[key].tagName == "BUTTON"){
      boolArray.push(buttons[key].getAttribute("clicked"));
    };
  };
  if(boolArray.length===numButtons){
    if(boolArray.includes("false")){
      return;
    } else {
      alert("all buttons clicked. go ahead with animation");
    }
  };
};

＆＃13;

<html>
  <head>
    <title>Sample page</title>
  </head>

  <body>
    <div>
      <button class="btns" id="homerwork" clicked=false>Homework</button>
      <button class="btns" id="teeth" clicked=false>Teeth</button>
      <button class="btns" id="reading" clicked=false>Reading</button>
      <button class="btns" id="stuff" clicked=false>Stuff</button>
      <button class="btns" id="good" clicked=false>good</button>
    </div>
  </body>
 </html>

＆＃13;

如何通过单击Javascript中的几个按钮来触发功能？

4 个答案: