时间戳

首页 > 解决方案 > 使用 getElementById 更改字体颜色

javascript - 使用 getElementById 更改字体颜色

问题描述

我试图通过将文本设置为白色来制作抽认卡，与背景颜色相同，然后当我按下按钮时，它变成黑色，显示文本。我不能用getElementsByClass，我只能用getElementById。每个答案都需要有一个唯一的 ID。最好使用单选按钮而不是按钮，例如复选框，只需一个复选框而不是两个按钮即可打开和关闭。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Book Title</title>
  <style>
    .answer {
      border-style: solid;
      border-color: #287EC7;
      color: white;
      `
    }
  </style>
</head>

<body>

  <h3> Flashcards </h3>



  <p class="question">
    The first question
  </p>

  <div id="bash_start">
    <p class="answer">
      The first answer
    </p>
  </div>

  <script>
    function myShowtext() {
      document.getElementById("bash_start").style.color = 'white';
    }

    function myHidetext() {
      document.getElementById("bash_start").style.color = 'black';
    }
  </script>
  <br />
  <div>
    <label>Check Answer:</label>
    <button onclick="myShowText(bash_start)">Show Answer</button>
    <button onclick="myHideText(bash_start)">Hide Answer</button>
  </div>

  <p class="question">
    The second question
  </p>


  <div div="bash_pass">
    <p class="answer">
      The second answer
    </p>
  </div>


  <script>
    function myHidetext() {
      document.getElementById("bash_pass").style.color = 'white';
    }

    function myHidetext() {
      document.getElementById("bash_pass").style.color = 'black';
    }
  </script>
  <br />
  <div>
    <label>Check Answer:</label>
    <button onclick="mySshowTextFunction(bash_pass)">Show Answer</button>
    <button onclick="myhideTextFunction(bash_pass)">Hide Answer</button>
  </div>


</body>

</html>

标签： javascriptgetelementbyid

解决方案

纠正了您的代码，几乎没有语法错误，并添加了带有复选框的优化功能来切换闪存。

function toggleAnswer(elem) {
  var color = 'white';
  if (elem.checked) {
    color = 'black';
  }
  document.getElementById(elem.value).style.color = color;
}
.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
}
<h3> Flashcards </h3>
<p class="question">
  The first question
</p>

<div>
  <p class="answer" id="bash_start">
    The first answer
  </p>
</div>
<div>
  <label>Check Answer:</label>
  <input type="checkbox" value="bash_start" onclick="toggleAnswer(this)">
</div>

<p class="question">
  The second question
</p>


<div>
  <p class="answer" id="bash_pass">
    The second answer
  </p>
</div>
<div>
  <label>Check Answer:</label>
  <input type="checkbox" value="bash_pass" onclick="toggleAnswer(this)">
</div>

希望它会有所帮助！

推荐阅读