Как запустить функцию, нажав несколько кнопок в Javascript? - PullRequest
Новая
       1

Как запустить функцию, нажав несколько кнопок в Javascript?

0 голосов
/ 09 июня 2018

Переменные в этом коде Javascript представляют кнопки, которые после нажатия на них запускают анимацию в функции, которая будет определена позже.Для запуска анимации необходимо нажать все 5 кнопок.Это та часть, с которой я борюсь.Код представляет собой то, что я смог сделать до сих пор (не очень хорошо в javascript).Кто-нибудь может указать мне правильное направление для решения этой проблемы? 

<script>
	  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);
		teehth.addEventListener("click",righclick);
		reading.addEventListener("click", righclick);
		stuff.addEventListener("click", righclick);
		good.addEventListener("click", rigclick);

	function rightclicks () {
	
	

	//function that will trigger the animation//
		
		
		}

</script>

Ответы [ 4 ]

0 голосов
/ 09 июня 2018

Я уверен, что есть более простой или превосходный способ сделать это, но, построив исходный фрагмент кода - сначала исправив опечатки, затем добавив функцию rightclick (), - я создал решение только с использованием VanillaJS.Надеюсь, это даст вам возможность поработать! 

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");
    }
  };
};
<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>
0 голосов
/ 09 июня 2018

Вы допустили некоторые орфографические ошибки (например, имя функции).Добавлен исполняемый код.Здесь все кнопки вызывают один и тот же метод щелчка правой кнопкой мыши.Надеюсь, это поможет вам начать. 

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>
0 голосов
/ 09 июня 2018

Установите атрибут clicked каждого HTML-элемента в обработчике события щелчка.Затем проверьте, есть ли у каждой кнопки атрибут «нажал», и если это так, назовите 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();
  }
}
0 голосов
/ 09 июня 2018

Непонятно, что именно вы хотите.Если вы хотите, чтобы ваша функция запускалась в течение определенного промежутка времени, есть метод js setInterval();.

Например: 

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

Приведенный выше код вызывает функцию каждые 3 секунды.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...