使用帶有純JavaScript的按鈕來回更改文本

Question

每次單擊按鈕時，我已經將按鈕的文本更改為“ RETURN”，並且p標記內的文本從“ ABC”更改為“ Lorem ipsum”。 是否有什么方法可以僅使用帶有JavaScript的“返回”按鈕將文本從“ Lorem ipsum”更改回“ ABC”？ 這是我的代碼

 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

您應該創建一個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 2

您可以嘗試關注

 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> 

Answer 3

是啊。 您可以在外部設置變量以顯示值。

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 4

您可以將原始文本與變量一起存儲：

 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 5

當您想將測試分別從“ ABC”更改為“ Lorem ipsum”，將“ Lorem ipsum”更改為ABC時，我的意思是它與奇數或偶數單擊有關，或者您想單擊按鈕，文本為“ ABC”然后將其更改改為“ Lorem ipsum”，反之亦然