Когда я пишу правильное слово, мои слова if и else будут освобождены одновременно - PullRequest
Новая
       11

Когда я пишу правильное слово, мои слова if и else будут освобождены одновременно

1 голос
/ 30 апреля 2020

Я пытался сделать эту «игру», где мне нужно написать английские sh слова, которые имеют 5 символов, если я что-то напишу gibberi sh, это говорит о том, что это слово неверно.

Однако, когда Я пишу слово из списка, оно показывает слово , но также показывает сообщение о том, что оно неверно . Кажется, и мои, и другие выполняют. Может ли кто-нибудь помочь мне понять это поведение? 

var emrat5 = [
    {emri:"about"},
    {emri:"added"},
    {emri:"again"},
    {emri:"ahead"},
    {emri:"above"},
    {emri:"adult"},
    {emri:"album"},
]

    function shfaq(){
        var inputi = document.getElementById("inputi").value;
        document.getElementById("thewrongdiv").innerHTML = ""
        for(var i=0;i<emrat5.length;i++){
        if(inputi == emrat5[i].emri){
            document.getElementById("thewrongdiv").style.display = "none"
            var result = document.createElement("h2");
            result.innerHTML = inputi;
            result.style.color = "blue";
            result.style.display = "block"
            document.getElementById("theOutputdiv").appendChild(result)
            document.getElementById("inputi").value= null
            

        }
        else{
            document.getElementById("thewrongdiv").innerHTML = ""
            var wrong = document.createElement("h2");
            wrong.innerHTML = "Incorrect Word";
            wrong.style.color = "red";
            document.getElementById("thewrongdiv").style.display = "block"
            document.getElementById("thewrongdiv").appendChild(wrong)
            inputi.value = ""

        }
        }
    }
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
    body{
        background: #d4d4d4;
    }
    *{
        font-family: monospace;
    }
    .verytop{
        background-color: #929292;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .verytop > h1{
        color:white;
        font-size: 30px;

    }
    #thetutorial{
        display: flex;
        justify-content: center;
        padding: 20px 0px;
    }
    #thetutorial > h3{
        font-size: 20px;
    }
    #thewrongdiv{
        width: 200px;
        height: 200px;
    }
</style>
<title>Word Guesser</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="verytop">
                    <h1>The 5 letter word game</h1>
                </div>
            </div>
            <div class="col-lg-4"></div>
        </div>
        <div class="row">
            <div id="thetutorial" class="col-lg-12">
                <h3>see how many 5 letter words with that length can you guess in 1 minute</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div style="margin-top: 40px;" id="theInputdiv">
                <input onsearch="shfaq()" id="inputi" class="form-control" type="search">

                </div>
                <div id="theOutputdiv">

                </div>
            </div>
            <div style="height:400px" class="col-lg-4 d-flex justify-content-center align-items-center">
                <div id="thewrongdiv">

                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

В вашем текущем коде входное значение сравнивается с каждой записью в списке ожидаемых слов. Это означает, что правильное слово будет принято оператором if, но также будет отклонено следующим словом в списке ожидаемых слов.

Чтобы преодолеть эту проблему, измените код на что-то вроде этого: 

var correct = false;
for(var i = 0; i < emrat5.length; i++) {
   if(inputi == emrat5[i].emri){
      correct = true;
      break;
   }
if(correct){
   // ...Handle correct word
} else {
   // ...Handle incorrect word
}
0 голосов
/ 30 апреля 2020

Проблема: отображается сообщение об ошибке даже после совпадения из-за вашего l oop. Пример, который вы вводите "о". Он хорошо входит в блок if, поскольку совпадение будет удовлетворять за первую итерацию l oop. Теперь l oop будет go для второй итерации, "about" не равно "second word", которое будет go в другой части.

Решение: вам просто нужно завершить l oop когда вы получите свой первый матч. Просто добавьте оператор break в конце IF.

Модифицированный код: 

if(inputi == emrat5[i].emri){
        document.getElementById("thewrongdiv").style.display = "none"
        var result = document.createElement("h2");
        result.innerHTML = inputi;
        result.style.color = "blue";
        result.style.display = "block"
        document.getElementById("theOutputdiv").appendChild(result)
        document.getElementById("inputi").value= null
        break;
    }
    else{
        document.getElementById("thewrongdiv").innerHTML = ""
        var wrong = document.createElement("h2");
        wrong.innerHTML = "Incorrect Word";
        wrong.style.color = "red";
        document.getElementById("thewrongdiv").style.display = "block"
        document.getElementById("thewrongdiv").appendChild(wrong)
        inputi.value = ""

    }
0 голосов
/ 30 апреля 2020

Вам нужно выйти из if, чтобы заставить его работать правильно: просто добавьте break; в конце вашего оператора if. Потому что, если он не выйдет из l oop, он будет работать для всего l oop, что означает, что он будет правильным в первый раз, но все равно запустит else, потому что он в l oop. 

   if(inputi == emrat5[i].emri){
            document.getElementById("thewrongdiv").style.display = "none"
            var result = document.createElement("h2");
            result.innerHTML = inputi;
            result.style.color = "blue";
            result.style.display = "block"
            document.getElementById("theOutputdiv").appendChild(result)
            document.getElementById("inputi").value= null
            break;            

        }

Протестировано и работает.

...