Show hide using plain js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Title</title>
<script></script>
<style> 
</style> 
</head>
<body>
    <h1>Book Title </h1>
    <p class="question"> This is a question. 
    </p> 
    <p class="answer">This is an answer.
    </p>
    <br />
    <div>
        <label>Check Answer:</label>
        <button  onclick="showFunction()">Show Answer</button>
        <button  onclick="hideFunction()">Hide Answer</button> 
    </div>
</body>
</html>

JavaScript

window.showFunction = ()=> {
    var x = document.getElementsByClassName("answer")[0];
    x.style.color = "black";
}
window.hideFunction = ()=> {
    var x = document.getElementsByClassName("answer")[0];
    x.style.color = "white";
}