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 double equals to signs but to no avail. Can someone help me with this?

You can checkout my code:

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';
    
    }
    

}

CodePudding user response：

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';
    
    }
}

CodePudding user response：

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");

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

<div id="card1" style="display: block">Cart1</div>
<div id="card2">Cart2</div>
<div id="card3" style="display: none">Cart3</div>