Использование getElementById для изменения цвета шрифта - PullRequest
Новая
       6

Использование getElementById для изменения цвета шрифта

0 голосов
/ 28 мая 2018

Я пытаюсь сделать карточки, установив для текста белый цвет, аналогичный фону, а затем, когда я нажимаю кнопку, он становится черным, что показывает текст.Я не могу использовать getElementsByClass, я могу использовать только getElementById.Каждый ответ должен иметь уникальный идентификатор.Было бы идеально использовать вместо кнопки переключатель, например флажок, что-то, что можно включить и выключить с помощью простого флажка вместо двух кнопок.

<!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 голосов
/ 28 мая 2018

Исправлен ваш код с небольшим количеством синтаксических ошибок и добавлена ​​оптимизированная функция с флажком для переключения вспышки. 

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>

Надеюсь, это поможет!

0 голосов
/ 28 мая 2018

Вместо этого используйте document.querySelector и передайте id в качестве параметра таким функциям, как: 

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

function myHideText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'white';
}

ПРИМЕЧАНИЕ: Вам не нужно дублировать функции, просто передайтеидентификатор в качестве параметра, также вам нужно проверить имя функции в вызове, поскольку JS - это регистрозависимый язык. 

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

function myHideText(id) {
  document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
  border-style: solid;
  border-color: #287EC7;
  color: white;
}
<h3> Flashcards </h3>

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

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

<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 id="bash_pass">
  <p class="answer">
    The second answer
  </p>
</div>

<br />

<div>
  <label>Check Answer:</label>
  <button onclick="myShowText('bash_pass')">Show Answer</button>
  <button onclick="myHideText('bash_pass')">Hide Answer</button>
</div>
...