Javascriptによるinputの入力内容を取得して、入力内容を比較した後にformのBorderColorを変更させたい

Question

現在、簡易的なクイズサイトをHTMLCSSとJavascriptを用いて作成しております。

具体的には、inputタグに入力された内容をEnterキーが押下された時に取得して、その内容をあらかじめPHPで変数に代入してあるクイズの答えと比較して、それがクイズの答えと一致していれば、formのborderColorを変更するという実装に取り組んでいます。

しかし、Javascriptで書いた内容が全く反応しません。formのborderColorが一切変わりません。コードのどの部分を編集すれば、Javascriptが反応するでしょうか？

<form id="quiz_form" class="quiz_form">
    <input class="answer_input" type="text" name="answer" id="answer" autocomplete="off">
    <!-- あらかじめ取得してる答えをvalueに変数として渡す -->
    <input id="correct" type="hidden" value="<?php echo $answer ;?>">
    <script type="text/javascript" src="../js/quiz.js"></script>
</form>

.quiz_form {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  border-radius: 32px;
  padding: 8px 16px;
  background-color: white;
}

.answer_input{
  margin-right: 3px;
  outline: none;
  border: 0;
}

    // 入力された内容を取得
    const $input = document.getElementById('answer_input');
    let $answer = $input.value;
    // 答えを取得
    let $correct = document.getElementById('correct').value;
    // フォームのborderColorを取得
    let $quiz_form = document.getElementById('quiz_form');
    let $borderColor = $quiz_form.style.borderColor;

    // input内でEnterキーが入力された時に、関数を呼び出す
    $input.addEventListener('keydown', (e)=>{
        let keycd = e.Code;
        if (keycd === 'Enter') {
            checkAnswer($correct);
        }
    });

    // 入力内容と答えを比較してそれぞれに合わせた色に変更する。
    const checkAnswer = (correct) => {
        if ($answer === correct) {
          $borderColor = '#58CD36';
        } else {
            $borderColor = 'red';
        }
    }

Answer 1

現状だと「押されたとき」じゃなく、「画面表示されたとき」の値をとってきてるのでは。
「押されたとき」に値を取得するように調整してみてください。
あと、値をデバッグし、想定の情報が入ってきているか確認してみてください。

Answer 2

試行錯誤した結果このように書くと解決できました。ありがとうございました。

// それぞれプロパティを定数宣言
const $input = document.forms.quiz_form.answer;
const $quiz_form = document.getElementById('quiz_form');
// 答えを取得
let $correct = document.getElementById('correct').value;

// フォームで文字が入力された時に発動する関数
$quiz_form.onkeydown = (e) => {
    let keycd = e.which;
    // Enterキーが押された時
    if (keycd == 13) {
        checkAnswer($correct);
    }
}

// 入力内容と答えを比較してそれぞれに合わせた色に変更する。
const checkAnswer = (correct) => {
    // 入力内容の値を取得
    let $answer = $input.value;
    // 正解不正解により枠線の色を変更する
    if ($answer === correct) {
        document.getElementById("quiz_form").style.borderColor = "#58CD36";
    } else {
        document.getElementById("quiz_form").style.borderColor = "red";
    }
}