Изменение текста вперед и назад с помощью кнопки с чистым JavaScript

Question

Я уже изменил текст кнопки на «ВОЗВРАТ» всякий раз, когда я впервые щелкаю по ней, и текст внутри тегов p меняется с «ABC» на «Lorem ipsum». Можно ли как-нибудь изменить текст обратно на «ABC» с «Lorem ipsum», используя кнопку «ВОЗВРАТ» только с JavaScript ?. Вот мой код

var text = document.getElementById("info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  text.innerHTML = "Lorem ipsum";
  btn.innerHTML = "RETURN";
});

body {
  margin: 0;
  text-align: center;
  font-size: 20px;
}

<p id="info">ABC</p>
<button id="btn">CLICK FOR MORE</button>

Answer 1

когда вы хотите изменить тест с ABC "на" Lorem ipsum "и" Lorem ipsum "на ABC соответственно, я имею в виду, что это что-то, связанное с нечетным или четным щелчком, или вы хотите, если кнопка нажата, текст" ABC " затем измените его на «Lorem ipsum» и наоборот

Answer 2

Вы можете сохранить исходный текст с переменными:

var text = document.getElementById("info");
var btn = document.getElementById("btn");
let formerText = "Lorem ipsum";
let formerBtn = "RETURN";
btn.addEventListener("click", function() {
  const tmpText = text.innerHTML;
  const tmpBtn = btn.innerHTML;
  text.innerHTML = formerText;
  btn.innerHTML = formerBtn;
  formerText = tmpText;
  formerBtn = tmpBtn;
});

body {
  margin: 0;
  text-align: center;
  font-size: 20px;
}

<p id="info">ABC</p>
<button id="btn">CLICK FOR MORE</button>

Answer 3

Вы должны создать toggle() для изменения текста;

var text = document.getElementById("info");
       var btn = document.getElementById("btn");
        btn.addEventListener("click", function() {
          text.innerHTML = "Lorem ipsum";
          btn.innerHTML = "RETURN";
          Toggle();
        });
        
        function Toggle() {
           if(btn.innerHTML === "Lorem ipsum") { 
     text.innerHTML = "Lorem ipsum";
     btn.innerHTML = "RETURN";
  } else {
      text.innerHTML = "RETURN";
     btn.innerHTML = "Lorem ipsum";
  }
        } 

<p id="info">ABC</p>
<button id="btn">CLICK FOR MORE</button>
    

Answer 4

Да.Вы можете установить переменную снаружи, чтобы зафиксировать значения.

var text = document.getElementById("info");
var btn = document.getElementById("btn");
var flipper = true;
btn.addEventListener("click", function() {
    text.innerHTML = flipper ? "Lorem ipsum" : "Prev text";
    flipper = !flipper;
    btn.innerHTML = "RETURN";
});

Answer 5

Вы можете попробовать следующее

var text = document.getElementById("info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
      if(btn.innerHTML === "CLICK FOR MORE") { 
         text.innerHTML = "Lorem ipsum";
         btn.innerHTML = "RETURN";
      } else {
          text.innerHTML = "ABC";
         btn.innerHTML = "CLICK FOR MORE";
      }
    });

body {
  margin: 0;
  text-align: center;
  font-size: 20px;
}

<p id="info">ABC</p>
<button id="btn">CLICK FOR MORE</button>