Twitter Bootstrap Question posted in

Both my if and else get excecuted at the same time when I write a correct word-Twitter bootstrap

I tried making this “game” where I have to write English words that have 5 characters, if I write something gibberish it says that that word is incorrect.

However, when I write a word from the list, it shows the word, but it also shows the message saying its incorrect. It seems both my if and else are executing. Can someone help me understanding this behavior?

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>
Tags:

3

Answers


  1. 0

    You need to break out of the if to make it work correctly :
    just add break; at the end of your if statement.
    Because if it doesn’t come out of the loop its gonna run for the entire loop meaning it would be correct the first time but still run the else because its in the loop. 

       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;            

        }

    Tested it and it works.

    Login or Signup to reply.
  2. 0

    In your current code the input value is compared to each entry in the expected words list. This means that a correct word will be accepted by the if statement, but will also be declined by the next word in the expected words list.

    To overcome this issue, change the code to something like this:

    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
}
    Login or Signup to reply.
  3. 0

    Issue: Its displaying error message even after match because of your loop.
    Example you are entering “about”. It well enter in if block as the match will satisfy for the first loop iteration. Now the loop will go for second iteration, “about” is not equal to “second word”, which will go to else part.

    Solution: You just need to terminate loop when you get your first match. Just add break statement at the end of the IF.

    Modified code:

    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 = ""

    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search