Блог

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

Я пытаюсь использовать это как стандартную функцию «простите, если это неподходящий жаргон для этого», мне также любопытно, как это можно сделать как функцию со стрелкой, поскольку это означало, что я мог бы изменить ее со светло-серого на красный, но не обратно на светло-серый.

 let redBtn = document.getElementById('redBtn');
redBtn.addEventListener('click', function() {
 const bgColor = redBtn.style.background;
  if (bgColor == 'lightgray') {
   redBtn.style.background = 'red';
  } else {
  redBtn.style.background = 'lightgray';
 }
 });
  

также функция arrow, если вы не возражаете, также дает представление об этой проблеме, спасибо!

 let red = document.getElementById('redBtn');
 red.addEventListener('click', () => {
  red.style.background = 'red';
  if (red == 'lightgray') {
  red.style.background = 'red';
  } else {
  red.style.background = 'lightgray';   
 `enter code here` });
  

При первом щелчке доступ к background свойству вернет пустую строку, даже если CSS установил для нее значение lightgray :

 console.log(
  document.querySelector('div').style.background === ''
);  

 .foo {
  background-color: red;
}  

 <div class="foo">foo</div>  

Если вы хотите изменить его на red when the background lightgray , проверьте, является ли это lightgray или пустой строкой:

 let redBtn = document.getElementById('redBtn');
redBtn.addEventListener('click', function() {
  const bgColor = redBtn.style.background;
  if (bgColor == 'lightgray' || bgColor === '') {
    redBtn.style.background = 'red';
  } else {
    redBtn.style.background = 'lightgray';
  }
});
  

Или, может быть, было бы приятнее переключить if / else — просто проверьте, есть ли фон red , и если да, назначьте ему lightgray . Вы можете использовать условный оператор здесь, чтобы уменьшить объем кода, если хотите:

 let redBtn = document.getElementById('redBtn');
redBtn.addEventListener('click', () => {
  const bgColor = redBtn.style.background;
  redBtn.style.background = bgColor === 'red'
  ? 'lightgray'
  : 'red';
});
  

Функция со стрелкой здесь не имеет значения, потому что вы не ссылаетесь this или вызываете функцию как конструктор.

 const bgColor = redBtn.style.background;
  

Возвращает больше, чем просто цвет. Фактически он возвращает строку с восемью свойствами.
Итак, при первом нажатии он не соответствует «lightgray», потому что возвращаемая строка может быть, например, «lightgray none repeat scroll 0% 0%».

Чтобы получить только цвет фона, используйте это:

 const bgColor = redBtn.style.backgroundColor;
  

Давайте установим красный фон, как вы хотели сначала:

 // You wanted a function, so we added the onclick=""
<button id="redBtn" onclick="change()" style="background: red">Click</button>
  

Поскольку вы хотели функцию со стрелкой.

 function change() { }
// Same as
change = () => { }
  

Троичный оператор в основном говорит:

 bg === 'red' ? btn.style.background = 'lightgrey' : btn.style.background = 'red';
// Same as
if (background === red) { 
// Change to lightgrey 
} else { 
    // red
}
  

 let btn = document.getElementById('redBtn'); // Get button 
// Arrow function
change = () => {
  const bg = btn.style.background; // Grab background color
  // Ternary
  bg === 'red' ? btn.style.background = 'lightgrey' : btn.style.background = 'red';

}  

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="redBtn" onclick="change()" style="background: red">Click</button>