时间戳

首页 > 解决方案 > 如果语句返回条件（输入）检查是输入值 == 条件

javascript - 如果语句返回条件（输入）检查是输入值 == 条件

问题描述

我正在尝试制作测验网站，但检查答案时遇到问题。如果用户在输入中写下他的答案并单击“prześlij”按钮，它会使他的答案为“WAN，MAN，LAN，WLAN，PAN”并给他一分。我试图将运算符更改为 && 但它不起作用。有任何想法吗？（我复制了完整的代码给你清晰的视图，但问题在于函数 check() ）。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css"/>
    <title>Quiz</title>
    <script>

        var points = 0;

        function resultt(){



                        document.getElementById("result").style.display = "block";
                        document.getElementById("ocena").innerHTML = points;





        }
        function exit(){
            document.getElementById("result").style.display = "none";
            document.documentElement.scrollTop = 0;
            location.reload();
        }
        function check(){
                if(document.getElementById("input").value = "WAN, MAN, LAN, WLAN, PAN" || "WAN, MAN, LAN, PAN" || "WAN MAN LAN PAN" ){
                        points++;
                        document.getElementById("submit1").disabled = true;

                }else
                {
                    document.getElementById("submit1").disabled = true;
                }


        }
        function check_button(){
                    if(document.getElementById("true").clicked == true){
                        points++
                        document.getElementById("true").disabled = true;
                        document.getElementById("false").disabled = true;
                    }else if(document.getElementById("false").clicked == true){
                        document.getElementById("true").disabled = true;
                        document.getElementById("false").disabled = true;
                    }

        }
    </script>
</head>
<body>


        <h1 id="title">Quiz Z WIEDZY O SIECI</h1>


             <h1 id="pytanie1">Wypisz typy sieci od najbardziej rozległej do najmniej rozległej <br> (typy są 4, posługuj się skrutami)</h1>
                <input type="text" id="input" size="50"/>
                <input type="submit" id="submit1"onclick="check()">


            <h1 id="pytanie2">W jakim modelu sieci komputer w ramach danej usługi może być jednocześnie klijentem oraz serwerem?</h1>
                <input type="text" id="input5" size="50"/>
                <input type="submit" id="submit2" onclick="">


            <h1 id="pytanie3">Jaka warstwa w modelu TCP/IP odpowiada za dostarczanie informacji do użądzenia docelowego?</h1>
                <input type="text" id="input2" size="50"/>
                <input type="submit" id="submit3" onclick="">



            <h1 id="pytanie4">Podaj 2 protokoły występujace w warstwie transportu <br> (używaj skrutów)</h1>
                <input type="text" id="input3" size="50"/>
                <input type="submit" id="submit4" onclick="">



            <h1 id="pytanie5">Jaki protokół wykożystany będzie podczas streamingu gry?</h1>
                <button id="true" onclick="check_button()">UDP</button>
                <button id="false" onclick="check_button()">TCP</button>



            <h1 id="pytanie6">Rozwinięcie skrutu DNS to</h1>


                <button id="truee">Domain Name System</button>
                <button id="falsee">Distant Network Service</button>



            <h1 id="pytanie7">W jakiej topologii sieci wszystkie użądzienia są podpięte do jedngo kable?</h1>
                <button id="trueee">Topologia magistrali</button>
                <button id="falseee">Topologia gwiazfy</button>


            <button id="check" onclick="resultt()" href="result">SPRAWDŹ</button><br><br>

            <div id="result">


                <span id="ocena"></span> 





                <button id="SPRÓBUJ_PONOWNIE" onclick="exit()">SPRÓBUJ PONOWNIE</button>



            </div>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>.</h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>.</h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>
                <h1>.</h1><br>
                <h1>. </h1><br>
                <h1>. </h1><br>






</body>
</html>

标签： javascripthtmlif-statement

解决方案

您需要运行一个循环来遍历用户在单击提交按钮时输入的输入值。定义一个包含答案值的数组，并将这些值与用户每次迭代循环时输入的输入值进行比较。

在下面的示例中，我为您的潜在答案定义了一个数组，然后foraEach在元素选择器上使用循环作为输入。在循环中定义current值之后，forEach我们创建一个for循环来检查答案是否等于数组中的任何答案。如果我们得到一个匹配，运行代码给出一个点。

我使用了严格的比较器，所以我们trim()留白并添加toUpperCase()以确保答案中没有空格并且输入是大写的，就像我们将要比较输入的数组中的答案一样。 

//--> query the id for the button element, will be used for click event
let btn = document.getElementById('btn');
//--> get the list of elements that are <input>, i used the class with querySelectorAll
let inputs = document.querySelectorAll('.inputs');
//--> initiate an array to hold the values of your answers
let answers = ['WAN', 'MAN', 'LAN', 'WLAN', 'PAN'];
//--> this variable will be the current answer we will be comparing to the answers array throuhg each iteration
let answer;
//--> click event wraps around the loops
btn.addEventListener('click', function() {
  //forEach loop to iterate through the input elements
  inputs.forEach(function(val) {
    //--> hold the current iteration of the input in the answer variable
    answer = val.value.trim().toUpperCase();
    //--> for loop to itarate through the answers array, we use a classic for loop iterator method here
    //--> using the array.length method as a stop
    for (let i = 0; i < answers.length; i++) {
      //--> now compare the answer with the current iteration of the answers arrays value
      //--> keep in mind the strict comparator is being used here in the conditional "==="
      //--> capitalization will be key to returning true value as well as white space trimming in the input value
      if (answer === answers[i]) {
        //-- now run code for correct answer and iterate a point
        console.log(answer + ' Correct!')
      }
    }
  })

})
<input type="text" class="inputs">
<input type="text" class="inputs">
<input type="text" class="inputs">
<input type="text" class="inputs">
<input type="text" class="inputs">
<button id="btn">Submit</button>

推荐阅读