Активность кнопки при нажатии на слой
Вложений: 1
Всем добрый день!
Имеется такое задание. есть форма, на ней несколько блоков и кнопка (по умолчанию - неактивная). Необходимо сделать так, чтобы при нажатии на блок кнопка становилась активной, а если нажать на любое другое место формы (не на блок) кнопка снова становилась неактивной. Заранее спасибо за предложенные варианты решения. |
<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>
|
Спасибо большое за помощь!!!
|
Еще вопрос.
Как реализовать такую же работу программы, но чтобы кнопка блокировалась при 2ом нажатии на блок? Например, 1 раз - активна, 2- нет, 3 -активна, и т.д. |
<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,
если хотя бы у одного блока класс active, кнопка тоже активна? так? |
да! а если нет ни у одного - то неактивна.
|
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>
|
Спасибо!
|
| Часовой пояс GMT +3, время: 12:38. |