Форум

katefarine · #1 (**permalink**) 23.07.2017, 12:42

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

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

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

j0hnik · #2 (**permalink**) 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 · #3 (**permalink**) 23.07.2017, 20:23

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

katefarine · #4 (**permalink**) 23.07.2017, 22:21

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

j0hnik · #5 (**permalink**) 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 · #6 (**permalink**) 23.07.2017, 22:50

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

рони · #7 (**permalink**) 23.07.2017, 23:13

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

katefarine · #8 (**permalink**) 23.07.2017, 23:14

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

рони · #9 (**permalink**) 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 · #10 (**permalink**) 23.07.2017, 23:48

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript