Why is my conditional statement not working when trying to swap <p> text between 3 options in-CodePudding

I want to change the paragraph text when the next arrow is clicked. I can change it once but if I want to change it to a third option, it's not working. Can someone explain why this is the case?

I have made a Codepen with the issue: Conditional statement problem

<div >
  <div >
    <div id="back"><i id="arrow-left"><-</i></div>
    <div >
      <p></p>
    </div>
    <div id="next"><i id="arrow-right">-></i></div>
  </div>
</div>

let text = document.querySelector("p");
text.textContent = "text1";

let backLeft = document.getElementById("back");
let arrowBack = document.getElementById("arrow-left");

let nextRight = document.getElementById("next");
let arrowNext = document.getElementById("arrow-right");

if ((text.textContent = "text1")) {
  arrowBack.classList.add("hidden");
  nextRight.addEventListener("click", () => {
    arrowBack.classList.remove("hidden");
    text.textContent = "text2";
  });
  backLeft.addEventListener("click", () => {
    arrowBack.classList.add("hidden");
    text.textContent = "text1";
  });
} else if ((text.textcontent = "text2")) {
  nextRight.addEventListener("click", () => {
    text.textContent = "text3";
  });
  backLeft.addEventListener("click", () => {
    text.textContent = "text2";
  });
} else {
  text.textContent = "none";
}

CodePudding user response：

Conditions need to be added in the event listener and based on the conditions, hide or show elements

let text = document.querySelector("p");
text.textContent = "text1";

let backLeft = document.getElementById("back");
let arrowBack = document.getElementById("arrow-left");

let nextRight = document.getElementById("next");
let arrowNext = document.getElementById("arrow-right");

arrowBack.classList.add("hidden");

nextRight.addEventListener("click", () => {
  arrowBack.classList.remove("hidden");
  if (text.textContent === "text1") {
    text.textContent = "text2";
  } else if (text.textContent === "text2") {
    text.textContent = "text3";
  }
});

backLeft.addEventListener("click", () => {

  if (text.textContent === "text3") {
    text.textContent = "text2";
  } else if (text.textContent === "text2") {
    text.textContent = "text1";
    arrowBack.classList.add("hidden");

  }
});

body {
  background-color: black;
}

.tutNavigation {
  display: flex;
  padding: 3rem 2rem;
  box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25);
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  gap: 1rem;
}

.tutNavigation.flexNavigation {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  gap: 1rem;
  flex-direction: row;
}

.flexNavigation.tutorialText {
  text-align: center;
  max-width: 500px;
}

p {
  color: white;
  font-size: 16px;
  line-height: 1.3rem;
}

#back,
#next {
  padding: 1rem;
  cursor: pointer;
  border-radius: 5px;
  width: 72px;
}

i {
  font-size: 40px;
  color: white;
}

.hidden {
  display: none;
}

<div >
  <div >
    <div id="back"><i id="arrow-left"><-</i></div>
    <div >
      <p></p>
    </div>
    <div id="next"><i id="arrow-right">-></i></div>
  </div>
</div>

CodePudding user response：

You should pull out the eventListerens form the conditions! Beacouse you want to do something if you clicking on the arrows!

And inside the eventListeners you should write the logic.

const text = document.querySelector("p");
const possiblities = ["text1", "text2", "text3", "text4"];
let index = 0;

let backLeft = document.getElementById("back");
let arrowBack = document.getElementById("arrow-left");

let nextRight = document.getElementById("next");
let arrowNext = document.getElementById("arrow-right");

const checkAndHideArrows = () => {
  if (index >= possiblities.length - 1) {
    nextRight.classList.add("hidden");
    arrowNext.classList.add("hidden");
    console.log("hide right");
  } else {
    nextRight.classList.remove("hidden")
    arrowNext.classList.remove("hidden")
    console.log("show right");
  }
  
  if (index <= 0) {
    backLeft.classList.add("hidden");
    arrowBack.classList.add("hidden");
    console.log("hide left");
  } else {
    backLeft.classList.remove("hidden");
    arrowBack.classList.remove("hidden");
    console.log("show left");
  }
}

const setText = () => {
  text.textContent = possiblities[index];
  console.log(possiblities[index]);
  checkAndHideArrows();
};

const next = () => {
  if (index   >= possiblities.length - 1) {
    index = possiblities.length - 1;
  }
};

const prev = () => {
  if (index-- <= 0) {
    index = 0;
  }
};

setText();

nextRight.addEventListener("click", () => {
  next();
  console.log(index);
  setText();
});

backLeft.addEventListener("click", () => {
  prev();
  console.log(index);
  setText();
});

.hidden {
  color: transparent;
}

<div >
  <div >
    <div id="back"><i id="arrow-left"><-</i></div>
    <div >
      <p></p>
    </div>
    <div id="next"><i id="arrow-right">-></i></div>
  </div>
</div>