切换DOM的按钮

Question

我正在尝试创建一个按钮，单击该按钮可以更改其上方的文本。 但是，我也想将其放置在再次按下该按钮的位置，它将变回原来的位置。 这是到目前为止的代码，但是该按钮没有执行任何操作。

 <!doctype.html> <html> <head> </head> <body> <h1>Javascript</h1> <p id="display">Change my text!</p> <button onClick="writeMe()">Click me!</button> </body> <script> function writeMe() { if (document.getElementById("display") === "Change my text!") { document.getElementById("display").innerHTML = "Hello world!"; } else if (document.getElementById("display") === "Hello world!") { document.getElementById("display").innerHTML = "Change my text!"; } } </script> </html> 

谢谢！

Answer 1

document.getElementById()返回一个元素 ，它从不等于任何字符串。

使用适当的事件处理程序，然后检查元素的textContent属性，然后如果只想更改文本，则设置该属性。
如果要添加实际的HTML，请改用innerHTML 。

 document.getElementById('myButton').addEventListener('click', writeMe) function writeMe() { var display = document.getElementById("display"); if ( display.textContent === "Change my text!" ) { display.textContent = "Hello world!"; } else if ( display.textContent === "Hello world!" ) { display.textContent = "Change my text!"; } } 

 <h1>Javascript</h1> <p id="display">Change my text!</p> <button id="myButton">Click me!</button> 

可能甚至有一种DRY'ER的方式来编写这些if语句，但这是冗长的，并且应该易于阅读。

Answer 2

 <!DOCTYPE html> <html> <head> </head> <body> <h1>Javascript</h1> <p id="display">Change my text!</p> <button onClick="writeMe()">Click me!</button> </body> <script> function writeMe() { if (document.getElementById("display").innerHTML === "Change my text!") { document.getElementById("display").innerHTML = "Hello world!"; } else if (document.getElementById("display").innerHTML === "Hello world!") { document.getElementById("display").innerHTML = "Change my text!"; } } </script> </html> 

Answer 3

您忘了在条件检查中提到innerHTML

 function writeMe() { if (document.getElementById("display").innerHTML === "Change my text!") { document.getElementById("display").innerHTML = "Hello world!"; } else if (document.getElementById("display").innerHTML === "Hello world!") { document.getElementById("display").innerHTML = "Change my text!"; } } 

 <p id="display">Change my text!</p> <button onClick="writeMe()">Click me!</button> 

Answer 4

您需要在if语句中添加.innerHTML

Answer 5

使用.innerHtml获取字符串，以获取需要使用innerHtml的文本html。

 function writeMe() {
        if (document.getElementById("display").innerHTML === "Change my text!") {
            document.getElementById("display").innerHTML = "Hello world!";
        }
        else if (document.getElementById("display").innerHTML === "Hello world!") {
            document.getElementById("display").innerHTML = "Change my text!";
        }
    }

Answer 6

看来您只是忘记了要读取和比较的元素的.innerHTML属性。 否则，您将只针对元素本身，这将不等于任何文本字符串。

因此，例如，这一行：

if (document.getElementById("display") === "Change my text!") {

应该：

if (document.getElementById("display").innerHTML === "Change my text!") {

这是代码的工作版本（略有缩短）：

 <!doctype.html> <html> <head> </head> <body> <h1>Javascript</h1> <p id="display">Change my text!</p> <button onClick="writeMe()">Click me!</button> </body> <script> function writeMe() { var el = document.getElementById("display"); el.innerHTML === "Change my text!" ? el.innerHTML = "Hello world!" : el.innerHTML = "Change my text!"; } </script> </html>