Я использую функцию в JS, которая меняет цвет на красный, а затем на зеленый при нажатии - PullRequest
Новая
       8

Я использую функцию в JS, которая меняет цвет на красный, а затем на зеленый при нажатии

0 голосов
/ 02 августа 2020

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

<html>

<head>

<title>Test</title>

</head>

<body>

<div id="c" onclick="func()"></div>

<style>
#c{
background:#00ff00;
width:100px;
height:100px;
}
</style>

<script>
var c = document.getElementById('c');
function func(){
if(c.style.background = "#00ff00"){
c.style.background = "#ff0000";
}
else if(c.style.background = "#ff0000"){
c.style.background = "#00ff00";
}
}
</script>

</body>

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

Ответы [ 4 ]

1 голос
/ 02 августа 2020

Стиль фона нельзя получить с помощью .style.background здесь (это можно сделать только для встроенных стилей). Если вы хотите получить стиль, используйте window.getComputedStyle. Вы можете упростить себе жизнь, используя css -класс и .classList.toggle.

Более того: обычно не очень хорошая идея использовать встроенные обработчики событий. Назначьте обработчики в своем коде. 

document.addEventListener("click", toggleColor);

function toggleColor(evt) {
  if (evt.target.id === "c") {
    evt.target.classList.toggle("red");
  }
}
#c {
  background-color: #00ff00;
  width: 100px;
  height: 100px;
}

#c.red {
  background-color: red;
}
<div id="c"></div>
0 голосов
/ 02 августа 2020

Самый простой способ переключаться между двумя разными стилями для одного и того же элемента - использовать классы. Это выглядит аккуратно, а также помогает вам изменять несколько атрибутов в одном месте, а не писать несколько строк кода для выполнения аналогичных действий. Итак, попробуйте следующее: 

<html>

<head>

<title>Test</title>

</head>

<body>

<div id="c" class="green" onclick="func()"></div>

<style>
#c{
width:100px;
height:100px;
}
.green {
  background: green;
}
.red {
  background: red;
}
</style>

<script>
var c = document.getElementById('c');
var func = function(){
if(c.classList.contains('green')){
  c.classList.remove('green');
  c.classList.add('red');
} else if(c.classList.contains('red')) {
  c.classList.remove('red');
  c.classList.add('green');
}
};
</script>

</body>

Вот ссылка на jsfiddle для того же: https://jsfiddle.net/khushboo097/qf9t68zd/2

0 голосов
/ 02 августа 2020

В теге сценария, в операторе if, когда вы сравниваете две вещи, используйте === или ==. Вы не можете использовать =, поскольку это оператор присваивания и не возвращает true или false.

Так должна быть написана функция. 

<script>
var c = document.getElementById('c');
function func(){
if(c.style.background === "#00ff00"){
c.style.background = "#ff0000";
}
else if(c.style.background === "#ff0000"){
c.style.background = "#00ff00";
}
}
</script>
0 голосов
/ 02 августа 2020

попробуйте это` 

<html>

<head>

<title>Test</title>

</head>

<body>

<div id="c" onclick="func()"></div>

<style>
#c{
background:#00ff00;
width:100px;
height:100px;
}
</style>

<script>
var x = 0;
var c = document.getElementById('c');
function func(){
if(!x){
c.style.background = "#ff0000";
x = 1;
}
else{
c.style.background = "#00ff00";
x = 0;
}
}
</script>

</body>
</html>
...