CODEWITHSUNDEEP
javascript
user6096069
user6096069

Reputation:

JavaScript - If statement with text doesn't work properly

I am trying to make an if statement based off of user input. I can't seem to get this code to work. It continues to say no, even when I enter 'one', which is supposed to do something different, as you can see in the code snippet. I am running the code in the latest version of Chrome.

var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox").value;
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");

var num1 = Math.floor((Math.random() * 100) + 1);
var num2 = Math.floor((Math.random() * 100) + 1);
var ans = num1 + num2;

function question() {
  ques.innerHTML = num1 + " + " + num2;
}

function checkAns() {
  if(ansBox.value == "one") {
    isCorrect.innerHTML = "Yes";
  } else {
    isCorrect.innerHTML = "No";
  }
}

question();
body {
  font-family: Arial;
}

div {
  padding-top: 50px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div>
    <h1>Edu Game One</h1>
    <h3 id="question"></h3>
    <input type="text" id="ansBox" />
    <button id="submitBtn" onclick="checkAns()">Submit</button>
    <p id="isCorrect"></p>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Upvotes: 0

Views: 61

Answers (1)

Christian Ternus
Christian Ternus

Reputation: 8492

You had an extra .value at the end of your definition of ansBox. Removing that makes it work:

var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox");
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");

var num1 = Math.floor((Math.random() * 100) + 1);
var num2 = Math.floor((Math.random() * 100) + 1);
var ans = num1 + num2;

function question() {
  ques.innerHTML = num1 + " + " + num2;
}

function checkAns() {
  if(ansBox.value == "one") {
    isCorrect.innerHTML = "Yes";
  } else {
    isCorrect.innerHTML = "No";
  }
}

question();
body {
  font-family: Arial;
}

div {
  padding-top: 50px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div>
    <h1>Edu Game One</h1>
    <h3 id="question"></h3>
    <input type="text" id="ansBox" />
    <button id="submitBtn" onclick="checkAns()">Submit</button>
    <p id="isCorrect"></p>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Upvotes: 1

Related Questions