Using getElementById to change font color

I am trying to make flashcards by setting the text to white, the same color as the background, and then when i press the button, it turns to black, which shows the text. I cannot use getElementsByClass, I can only use getElementById. Each answer needs to have a unique id. It would be ideal to use a radio button instead of a button, like a check box, something that could turn on and off with just a check instead of two buttons.

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

Solution

Corrected your code with few syntax mistakes and added optimized function with a checkbox to toggle the flash.

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>

Hope it will help!