Блог

Главная - Вопросы по программированию - Заполнить CSS-квадрат щелчком JavaScript

Заполнить CSS-квадрат щелчком JavaScript

#javascript #html #jquery #css

#JavaScript #HTML #jquery #css

Вопрос:

Я создаю прототип базового трекера привычек в html, css и JavaScript. Есть несколько контуров красных квадратов (заполненных белым цветом), которые сделаны с использованием divs. Затем эти квадраты помещаются в контейнер для сохранения одинакового интервала, даже если размер страницы изменен.

Я пытаюсь разрешить пользователю щелкнуть квадрат, чтобы заполнить его, а затем снова щелкнуть его, чтобы отменить его. Когда я нажимаю на квадраты, ничего не происходит.

Еще одна проблема, которую я могу предвидеть, заключается в том, что квадраты могут не быть индивидуально адресуемыми в том виде, в котором я их написал, и я не совсем уверен, как это решить, поэтому, если бы кто-нибудь мог дать несколько советов о том, как это сделать, это было бы неплохо.

Весь мой код приведен ниже, но здесь также есть ссылка на codepen, если кому-то интересно:

https://codepen.io/CPU_Coding/pen/wvzaWMb

 function FillSquare() {
document.getElementsByClassName('eqi-container div')[0]
        .addEventListener('click', function (event) {
            document.body.style.backgroundColor = 'red';
        });
} 
 .eqi-container {
  border: 10px solid black;
  display: flex;
  justify-content: space-between;
}
.eqi-container div {
  width: 50px;
  height: 50px;
  background: white;
  border: 10px solid red;
} 
 <h2>Square Clicker</h2>

<div class="eqi-container">
  <div onClick="FillSquare"></div>
  <div onClick="FillSquare"></div>
  <div onClick="FillSquare"></div>
  <div onClick="FillSquare"></div>
</div>

Комментарии:

1. Почему вы привязываете onclick внутри функции, которая была запущена щелчком мыши??

2. Это мое первое погружение в javascript, поэтому я просто пытался собрать воедино материал, который я видел из разных руководств и статей. Так что я в принципе понятия не имею, что я делаю.

Ответ №1:

 function FillSquare(e) {
  e.classList.toggle('red');
} 
 .eqi-container {
  border: 10px solid black;
  display: flex;
  justify-content: space-between;
}

.eqi-container div {
  width: 50px;
  height: 50px;
  background: white;
  border: 10px solid red;
}
.eqi-container div.red {
  background:red;
} 
 <div class="eqi-container">
  <div onClick="FillSquare(this)"></div>
  <div onClick="FillSquare(this)"></div>
  <div onClick="FillSquare(this)"></div>
  <div onClick="FillSquare(this)"></div>
</div>

Ответ №2:

Есть много способов сделать это, но, как правило, вам следует подумать об использовании CSS для стилизации и javascript для переключения класса.

Например, в CSS:

 .active-square {
    background: red
}

Затем в HTML вы могли бы сделать:

 <div onclick="this.classList.toggle('active-square')">My Square</div>

Как правило, вы не стали бы напрямую использовать обработчики щелчков, подобные этому, и настраивали бы все с помощью javascript. Но это простой пример того, как это может работать.

Ответ №3:

 $(function(){
  $('.eqi-container div').click(function(){
    $(this).toggleClass('fill');
  })
}) 
 .eqi-container {
  border: 10px solid black;
  display: flex;
  justify-content: space-between;
}
.eqi-container div {
  width: 50px;
  height: 50px;
  border: 10px solid red;
}
.fill{
  background:red;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Square Clicker</h2>

<div class="eqi-container">
  <body>
  <div ></div>
  <div ></div>
  <div ></div>
  <div></div>
</div>