Javascript = to在if语句中被突出显示

Question

所以我做了一个非常简单的轮播，当用户点击一个按钮时，图像或内容就会改变。我让它工作了一半，但我只是一个问题。在代码中，我首先检查card1的显示是否为块，card3的显示是否为none。这就是问题所在。在第一部分还好，但在&&当我写card3.style = "display:none"时，它突出显示等号并且不起作用。我试过改变代码的方向，甚至添加==，但无济于事。有人能帮我一下吗?

你可以检查我的代码:

<div class="card1" id="card1">

</div>
<div class="card2" id="card2">

</div>
<div class="card3" id="card3">

</div>
<button onclick="change()">Change</button>

.card1{
width: 40%;
height: 40%;
background-color: blue;
}
.card2{
width: 40%;
height: 40%;
background-color: red;
display: none;
}
.card3{
display: none;
width: 40%;
height: 40%;
background-color: green;
}

var card1 = document.getElementById("card1")
var card2 = document.getElementById("card2")
var card3 = document.getElementById("card3")
function change(){
if(card1.style = 'display:block;' && card3.style = 'display:none'){
card1.style = 'display:none';
card2.style = 'display:block';

}

}

Answer 1

使用==进行比较:

var card1 = document.getElementById("card1")
var card2 = document.getElementById("card2")
var card3 = document.getElementById("card3")
function change(){
if(card1.style.display == 'block' && card3.style.display == 'none'){
card1.style = 'display:none';
card2.style = 'display:block';

}
}

Answer 2

使用==运算符将card1.style更新为card1.style.display

var card1 = document.getElementById("card1");
var card2 = document.getElementById("card2");
var card3 = document.getElementById("card3");
function change() {
if (card1.style.display == 'block' && card3.style.display == 'none') {
card1.style = 'display:none';
card2.style = 'display:block';
}
}

.card1 {
width: 40%;
height: 40%;
background-color: blue;
}
.card2 {
width: 40%;
height: 40%;
background-color: red;
}
.card3 {
display: none;
width: 40%;
height: 40%;
background-color: green;
}

<div class="card1" id="card1" style="display: block;">
Card 1
</div>
<div class="card2" id="card2" style="display: none;">
Card 2
</div>
<div class="card3" id="card3" style="display: none;">
Card 3
</div>
<button onclick="change()">Change</button>