Рони, чутка улучшил.
<!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> |
большое спасибо за помощь.
Если не затруднит, можете показать как по данной кнопке реализовать удаление выделенных блоков |
<!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, время: 02:11. |