我的JavaScript中CRN选择关联的If-Else语句无法正常工作求助

我之前发过类似问题但被移除了，还是搞不懂这么简单的功能为啥跑不起来。除了那段if-else判断逻辑，其他代码都正常——点击提交按钮时，没法根据选中的CRN值显示对应的课程名称。

<!doctype html>
<html lang="eng">
<head>
    <meta charset="utf-8">
    <title>FoxBooks</title>
    <link rel="stylesheet" type="text/css" href="Foxbooks.css" />
</head>
<body>
    <h1>FoxBooks</h1>
    <div id="course_selection">
        <h2>Find Your Textbooks:</h2>
        <p>Enter the CRN:</p>
        <select name="" id="CRN">
            <optgroup>
                <option value=""></option>
            </optgroup>
        </select>
        <input type="submit" value="Submit" id="btn" />
    </div>
    <h1 id="Course_Info"></h1>
    <script>
        selectCRN = document.getElementById("CRN").value;
        courseInfo = document.getElementById("Course_Info");
        button = document.getElementById("btn");

        async function getData(){
            //try this code, if it doesn't work...
            try{
                let response = await fetch('https://davise7823.github.io/SD330/foxbooks.json'); // make a request to a JSON endpoint
                let data = await response.json(); // parse the response as JSON

                //populates the "CRN" selection list
                for (let i = 0; i < data.courses.length; i++){
                    var x = document.getElementById("CRN");
                    var option = document.createElement("option");
                    option.text = data.courses[i].CRN;
                    x.add(option);
                }

                //If one is selected display it in the course info element
                button.addEventListener("click", () => {
                    if(selectCRN == 12054){
                        courseInfo.innerHTML = data.courses[0].Name;
                    }else if (selectCRN == 10016) {
                        courseInfo.innerHTML = data.courses[1].Name;
                    }else if(selectCRN == 11011){
                        courseInfo.innerHTML = data.courses[2].Name;
                    }else if(selectCRN == 11338){
                        courseInfo.innerHTML = data.courses[3].Name;
                    }else if(selectCRN == 12005){
                        courseInfo.innerHTML = data.courses[4].Name;
                    }else if(selectCRN == 12017){
                        courseInfo.innerHTML = data.courses[5].Name;
                    }else if(selectCRN == 11452){
                        courseInfo.innerHTML = data.courses[6].Name;
                    }else if(selectCRN == 12904){
                        courseInfo.innerHTML = data.courses[7].Name;
                    }
                });
            }
            //run this code to show any errors
            catch (error) {
                console.error(error); // handle any errors
            }
        }
        getData();
    </script>
    <footer>
        <hr />
        <small>&copy Elijah D - 09/25/23</small>
    </footer>
</body>
</html>

1. selectCRN变量未实时更新：页面加载时就获取了下拉框的value（此时是空值），之后用户切换CRN选项时，这个变量不会自动同步最新值，点击按钮时还是用初始的空值，自然匹配不上任何条件。
2. 类型匹配问题：下拉框的value是字符串类型，但判断时用的是数字，虽然==会隐式转换，但容易引发意外问题。
3. option未设置value属性：当前代码只给option设置了text，下拉框的value默认等于text，但显式设置value会更规范，避免潜在问题。

修改代码中的关键部分，解决上述问题：

async function getData(){
    try{
        let response = await fetch('https://davise7823.github.io/SD330/foxbooks.json');
        let data = await response.json();

        // 填充下拉框时，同时设置option的value和text
        const crnSelect = document.getElementById("CRN");
        for (let i = 0; i < data.courses.length; i++){
            const option = document.createElement("option");
            option.value = data.courses[i].CRN; // 显式设置value
            option.text = data.courses[i].CRN;
            crnSelect.add(option);
        }

        button.addEventListener("click", () => {
            // 点击按钮时，实时获取当前选中的CRN值
            const selectedCRN = crnSelect.value;
            // 统一转成数字后判断，避免类型问题
            switch(Number(selectedCRN)){
                case 12054:
                    courseInfo.innerHTML = data.courses[0].Name;
                    break;
                case 10016:
                    courseInfo.innerHTML = data.courses[1].Name;
                    break;
                case 11011:
                    courseInfo.innerHTML = data.courses[2].Name;
                    break;
                case 11338:
                    courseInfo.innerHTML = data.courses[3].Name;
                    break;
                case 12005:
                    courseInfo.innerHTML = data.courses[4].Name;
                    break;
                case 12017:
                    courseInfo.innerHTML = data.courses[5].Name;
                    break;
                case 11452:
                    courseInfo.innerHTML = data.courses[6].Name;
                    break;
                case 12904:
                    courseInfo.innerHTML = data.courses[7].Name;
                    break;
                default:
                    courseInfo.innerHTML = "请选择有效的CRN";
            }
        });
    }
    catch (error) {
        console.error(error);
    }
}
getData();

另外，建议把页面加载时的selectCRN = document.getElementById("CRN").value;删掉，因为现在是在点击按钮时实时获取值，不需要这个初始化的变量。

可以进一步简化判断逻辑，不用写一堆if-else或switch，直接根据CRN从data里查找对应的课程：

button.addEventListener("click", () => {
    const selectedCRN = crnSelect.value;
    const course = data.courses.find(item => item.CRN == selectedCRN);
    if(course){
        courseInfo.innerHTML = course.Name;
    }else{
        courseInfo.innerHTML = "请选择有效的CRN";
    }
});

这样就算后续新增课程，也不用修改判断逻辑，扩展性更好。

内容的提问来源于stack exchange，提问作者Adavis