Question

我试图制作一个按钮，点击该按钮可以更改其上方的文字。但是，我也想把它再次按下它的位置，它会改变它。这是我到目前为止所获得的代码，但按钮没有做任何事情。

＆＃13;

<!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>

＆＃13;

谢谢！

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>

编写那些if语句可能有一种甚至是DRY的方式，但这很冗长，应该很容易理解。

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>

切换更改DOM的按钮

6 个答案: