Логика для отображения элемента HTML с комбинацией переключателей

Question

Новичок, начинающий, застенчиво просит помощи после того, как плачет над этим с моей кофейной кружкой и Red Bull в течение 3-4 часов.Я гуглил, пробовал разные подходы из похожих постов StackOverflow, но, к сожалению, безуспешно.Я надеюсь, что некоторые опытные веб-разработчики могут, возможно, взглянуть и посмотреть, что я сделал неправильно или, очевидно, пропустил.Он предназначен для того, чтобы быть полезным инструментом для нашей группы LARP (ботаники волшебной школы).

Чего я хотел бы достичь : комбинация из 2 вариантов выбора пользователя (год / путь обучения) отображаетРасписание в виде HTML-элемента под формой.В идеале без кнопки отправки.

Вот кодекс: https://codepen.io/anzuj/pen/QRYwrY?editors=1111

Для простоты отладки включены только опции "младшего" года, поэтому выберите "младший" год и путь "искусителя"должен сгенерировать текст «Расписание младшего специалиста!» в пределах <span id="classResult"> </span>.

Код кажется неверным и не генерирует соответствующее сообщение для выбора младшего года.Любая помощь будет высоко ценится, поскольку новичок, несомненно, обескураживает проблемы с такой, казалось бы, простой проблемой ..

//function to run whenever user changes radio inputs
$(document).ready(function() {
      $('input[type="radio"]').on("change", function() {
        //making chosen radio options to variables
        var $year = $('input[name="year"]:checked');
        var $path = $('input[name="path"]:checked');
        //logic
        if ($year.val() == "junior" && $path.val() == "artificer") {
          $("classResult").innerHTML = "Junior artificer timetable!";
        } else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
          $("classResult").innerHTML = "Junior cursebreaker timetable!";
        } else if ($year.val() == "junior" && $path.val() == "crypto") {
          $("classResult").innerHTML = "Junior crypto timetable!";
        }
      });
    }

body {
  font-size: 1.2em;
}

<p>Select your year:</p>
<input type="radio" id="junior" name="year" value="junior">Junior
<br>
<input type="radio" id="sophomore" name="year" value="sophomore">Sophomore
<br>
<input type="radio" id="senior" name="year" value="senior">Senior
<br>
<p>Select your path:</p>
<input type="radio" id="artificer" name="path" value="artificer">Artificer
<br>
<input type="radio" id="cursebreaker" name="path" value="cursebreaker">Curse Breaker
<br>
<input type="radio" id="crypto" name="path" value="crypto">Cryptozoologist
<br>

<span id="classResult"> </span>

<br />
<br />

<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

Answer 1

Ваш код содержит две ошибки: Вызов метода к ready не закрыт правильно. Вы также должны установить html-контент, используя .html(), и вы должны выбрать по id, используя #id. Следующий код должен быть правильным:

//function to run whenever user changes radio inputs
$(document).ready(function () {
    $('input[type="radio"]').on("change", function () {
        //making chosen radio options to variables
        var $year = $('input[name="year"]:checked');
        var $path = $('input[name="path"]:checked');
        //logic
        if ($year.val() == "junior" && $path.val() == "artificer") {
            $("#classResult").html("Junior artificer timetable!");
        } else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
            $("#classResult").html("Junior cursebreaker timetable!");
        } else if ($year.val() == "junior" && $path.val() == "crypto") {
            $("#classResult").html("Junior crypto timetable!");
        }
    });
});

https://codepen.io/lukasmoeller/pen/KLJpBg?editors=1111