Javascript 等于在 if 语句中突出显示

Question

So i was making a pretty simple carousel in which when a user clicks on a button, the image or content changes. I got it to work halfway but i am only one problem. In the code i first check if the display of card1 is block and the display of card3 is none. That is where it shows the problem. In the first part it is fine but after the && when i write card3.style = "display:none" it highlights the equals to sign and doesn't work. I have tried changing the orientation of the code and even adding == but to no avail. Can someone help me with this?

You can checkout my code:

   <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

Use == to compare:

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

Use == operator and update card1.style to 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>