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

koaltpgm  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(45)

我发布了一个类似的问题,但它被取下,把我仍然很好奇为什么这么微不足道的东西不工作.这是我所有的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>

41zrol4v

41zrol4v1#

就像@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();

个字符

相关问题