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>
Aucun commentaire:
Enregistrer un commentaire