使用getElementById更改字体颜色

时间：2018-05-28 13:53:05

标签： 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>

2 个答案:

答案 0 :(得分：1)

改为使用"/usr/local/bin/sass" "--cache-location" "/Users/julien/Library/Caches/NetBeans/8.2/sass-compiler" "--trace" "/Users/julien/Sites/Tests/scss/style.scss" "/Users/julien/Sites/Tests/css/style.css" /Users/julien/Sites/Tests/scss/style.scss:62: Invalid CSS after "... #{$property}": expected "{", was ";" (Sass::SyntaxError) from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:1278:in `expected' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:1208:in `expected' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:1203:in `tok!' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:677:in `block' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:747:in `declaration_or_ruleset' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:686:in `block_contents' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:678:in `block' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:319:in `each_directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:234:in `special_directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:209:in `directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:686:in `block_contents' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:678:in `block' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:747:in `declaration_or_ruleset' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:686:in `block_contents' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:678:in `block' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:319:in `each_directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:234:in `special_directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:209:in `directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:689:in `block_contents' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:225:in `directive_body' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:217:in `directive' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:696:in `block_child' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:689:in `block_contents' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:137:in `stylesheet' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:41:in `parse' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/engine.rb:414:in `_to_tree' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/engine.rb:389:in `_render_with_sourcemap' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/engine.rb:307:in `render_with_sourcemap' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:391:in `run' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:63:in `process_result' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/base.rb:52:in `parse' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/base.rb:19:in `parse!' from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/bin/sass:13:in `<top (required)>' from /usr/local/bin/sass:23:in `load' from /usr/local/bin/sass:23:in `<main>' Done. 并将document.querySelector作为参数传递给以下函数：

id

注意：您不需要复制这些函数，只需将id作为参数传递，您也需要在调用中检查函数的名称，因为JS是一个案例 - 敏感的语言。

＆＃13;
＆＃13; 
function myShowText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'black';
}

function myHideText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'white';
}
＆＃13; 
function myShowText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'black';
}

function myHideText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'white';
}
＆＃13; 
.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用几个语法错误修正了您的代码，并添加了优化的功能，并使用复选框切换闪存。

＆＃13;
＆＃13; 
function toggleAnswer(elem) {
  var color = 'white';
  if (elem.checked) {
    color = 'black';
  }
  document.getElementById(elem.value).style.color = color;
}
＆＃13; 
.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望它会有所帮助！

相关问题
最新问题