我的 If-Else 语句不起作用，尽管它完全没问题

问题描述 投票：0回答：1

我发布了一个类似的问题，但它被删除了，我仍然很好奇为什么如此微不足道的东西不起作用。 这是我所有的 html/javascript...

<!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>

我的 JavaScript 从这里开始...

            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

这就是 if else 语句失败的地方

                    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;

除了 if else 语句之外，如果在这里放入其他任何内容，它都会起作用。

                        }
                    });
                }
                //run this code to show any errors
                catch (error) {
                    console.error(error); // handle any errors
                }
            }
            getData();

我的js到这里就结束了

    </script>
    <footer>
        <hr />
        <small>&copy Elijah D - 09/25/23</small>
    </footer>
</body>
</html>
javascript html json if-statement asynchronous
1个回答
0
投票

就像 @jaromanda-x 在他们的评论中指出的那样，

element.value
需要在事件监听器内部而不是之前进行评估。

// Store the element, not its value, here
const selectCRNElement = document.getElementById("CRN");
const courseInfo = document.getElementById("Course_Info");
const button = document.getElementById("btn");


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


    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);
    }


    button.addEventListener("click", () => {
      // Get the value of the select element and convert it to an int for the comparisons on button click
      const selectCRN = parseInt(selectCRNElement.value)
      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();
<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>
  <footer>
    <hr />
    <small>&copy Elijah D - 09/25/23</small>
  </footer>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.