使用单选按钮组合显示 HTML 元素的逻辑

Question

初学者用我的咖啡杯和红牛为这个哭泣了 3-4 小时后，害羞地寻求帮助。我用谷歌搜索，尝试了类似 StackOverflow 帖子中的不同方法，但不幸的是没有运气。我希望一些经验丰富的 Web 开发人员可以看看我做错了什么或明显遗漏了什么。它旨在成为我们 LARP 小组（魔法学校书呆子）的有用工具。我想要实现的目标：用户的 2 个选择（学习年份/路径）的组合将时间表显示为表单下方的 HTML 元素。理想情况下没有提交按钮。这是 Codepen：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>