Javascript-форум - Активность кнопки при нажатии на слой

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Активность кнопки при нажатии на слой (https://javascript.ru/forum/misc/69857-aktivnost-knopki-pri-nazhatii-na-slojj.html)

katefarine

23.07.2017 12:42

Активность кнопки при нажатии на слой

Вложений: 1

Всем добрый день!

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

Заранее спасибо за предложенные варианты решения.

j0hnik

23.07.2017 13:40

<html>
<head>
<style>
	form{
		width: 200px;
		height: 100px;
		border: 1px solid red;
	}
	div{
		display: inline-block;
		width: 50px;
		height: 50px;
		border: 1px solid green;
	}
</style>
</head>
<body> 
	<form action="">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<button disabled>кнопка</button>
	</form>
	<script>
document.querySelectorAll('div').forEach((el)=> el.addEventListener("click", function(e){
	e.stopPropagation();
document.querySelector('button').disabled = false;
})
);
document.querySelector('form').addEventListener("click", function(e){
	document.querySelector('button').disabled = true;
});
	</script>
</body>
</html>

katefarine

23.07.2017 20:23

Спасибо большое за помощь!!!

katefarine

23.07.2017 22:21

Еще вопрос.
Как реализовать такую же работу программы, но чтобы кнопка блокировалась при 2ом нажатии на блок?
Например, 1 раз - активна, 2- нет, 3 -активна, и т.д.

j0hnik

23.07.2017 22:43

<html>
<head>
	<style>
		form{
			width: 200px;
			height: 100px;
			border: 1px solid red;
		}
		div{
			display: inline-block;
			width: 50px;
			height: 50px;
			border: 1px solid green;
		}
	</style>
</head>
<body> 
	<form action="">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<button disabled>кнопка</button>
	</form>
	<script>
		var i = 0;
		document.querySelectorAll('div').forEach((el)=> el.addEventListener("click", function(e){
			e.stopPropagation();
			i++;
			document.querySelector('button').disabled = (i%2) ? false : true;
		})
		);
		document.querySelector('form').addEventListener("click", function(e){
			document.querySelector('button').disabled = true;
		});
	</script>
</body>
</html>

katefarine

23.07.2017 22:50

Но получается, что например, при нажатии на еще один блок кнопка снова неактивна. Просто задание состоит в том, чтобы при выделении блока (нажатии на блок), он менял цвет и при этом кнопка становилась активна. Например, я выделаю все блоки, и кнопка всегда активна (не меняет свое состояние), а если я прохожусь по всем блокам по второму разу, т.е. снимаю выделение, то когда все выделение снято со всех блоков - тогда кнопка снова неактивна

рони	23.07.2017 23:13

katefarine,
если хотя бы у одного блока класс active, кнопка тоже активна? так?

katefarine

23.07.2017 23:14

да! а если нет ни у одного - то неактивна.

рони	23.07.2017 23:29

katefarine,

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
    form{
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
    div{
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px solid green;
    }
    .active{
      background-color: #8B4513;
    }

  </style>
</head>
<body>
  <form action="">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <button disabled>кнопка</button>
  </form>
  <script>
    document.querySelector('form').addEventListener("click", function(e){
      var target = e.target;
        if (target.closest("div")) target.classList.toggle("active");
        else document.querySelectorAll('div').forEach(el=> el.classList.remove("active"));
      document.querySelector('button').disabled = !document.querySelectorAll('div.active').length;
    });
  </script>
</body>
</html>

katefarine

23.07.2017 23:48

Спасибо!

j0hnik

24.07.2017 02:21

Рони, чутка улучшил.

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<style>
		form{
			width: 200px;
			height: 100px;
			border: 1px solid red;
		}
		div{
			display: inline-block;
			width: 50px;
			height: 50px;
			border: 1px solid green;
		}
		.active{
			background-color: #8B4513;
		}

	</style>
</head>
<body>
	<form action="">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<button disabled>кнопка</button>
	</form>
	<script>
		document.querySelector('form').addEventListener("click", function(e){
			var target = e.target;
			if (target.tagName === 'DIV') target.classList.toggle('active');
			else document.querySelectorAll('div').forEach( el => el.classList.remove("active"));
			document.querySelector('button').disabled = !document.querySelector('div.active');
		});
	</script>
</body>
</html>

katefarine

24.07.2017 12:31

большое спасибо за помощь.
Если не затруднит, можете показать как по данной кнопке реализовать удаление выделенных блоков

j0hnik

24.07.2017 15:28

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<style>
		form{
			width: 200px;
			height: 100px;
			border: 1px solid red;
		}
		div{
			display: inline-block;
			width: 50px;
			height: 50px;
			border: 1px solid green;
		}
		.active{
			background-color: #8B4513;
		}

	</style>
</head>
<body>
	<form action="">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<button disabled>кнопка</button>
	</form>
	<script>
		document.querySelector('form').addEventListener("click", function(e){
			var target = e.target;
			if (target.tagName === 'DIV') target.classList.toggle('active');
			else if (target.tagName === 'BUTTON') document.querySelectorAll('div.active').forEach(el => el.parentNode.removeChild(el));
			else document.querySelectorAll('div').forEach(el => el.classList.remove("active"));
			document.querySelector('button').disabled = !document.querySelector('div.active');
		});
	</script>
</body>
</html>

Часовой пояс GMT +3, время: 23:56.