3

HTML code: 

    <form>
    Input: <input type="text" name="input" id="input"><br>
    <br>
    Output: <input type="text" name="output" id="output"><br>
    <input type="submit" value="submit" onclick="yourGuess()" id="submit">
    </form>


<div id="answer"></div>

Script

I can't figure out how to get the code to compare input to the words in the array and come out with a correct or wrong answer and put it in the div (id=answer).

function yourGuess()
{
var n = 0;
var words = ['banana', 'orange', 'apple', 'peach'];
var guess1 = document.getElementById("input").value;

//wrong answer
if (guess1 !== words) {
    document.getElementById("answer").innerHTML = "Wrong!";

}
else {
//right answer
    if (guess1 == words) {
        document.getElementById("answer").innerHTML = "Correct!";

    }
</body>
Improve this question
1
  • Thanks everyone for all your help!!! Commented Nov 26, 2016 at 3:03

7 Answers 7

Reset to default
3

I would suggest using jQuery.inArray() if you go with jQuery:

$('#submit').on('click', function(event) {
  event.preventDefault();
  var wordsArray = ['banana', 'orange', 'apple', 'peach'];
  var guessInput = $('#input').val();
	
  /* Check in Array */
  if($.inArray(guessInput, wordsArray) !== -1) {
    $('#answer').text('Correct!');
  } else {
    $('#answer').text('Wrong!');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Input:
  <input type="text" name="input" id="input">
  <br>
  <input type="submit" value="submit" id="submit">
</form>
<div id="answer"></div>

Or you can go with JavaScript Array indexOf() Method

function yourGuess() {
  var wordsArray = ['banana', 'orange', 'apple', 'peach'];
  var guessInput = document.getElementById('input').value;
  
  /* Check indexOf() */
  if(wordsArray.indexOf(guessInput) !== -1) {
    document.getElementById('answer').innerHTML = 'Correct!';
  } else {
    document.getElementById('answer').innerHTML = 'Wrong!';
  }
}
<form>
  Input:
  <input type="text" name="input" id="input">
  <br>
  <input type="submit" value="submit" id="submit" onclick="yourGuess()">
</form>
<div id="answer"></div>

Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), to check for the presence of value within array, you need to check if it's not equal to (or greater than) -1.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

var answer = $.inArray(guessInput, wordsArray) !== -1 ? 'Correct!' : 'Wrong!'; $('#answer').text(answer ); would be more concise but +1
Thank you! It's brilliant!!!
2

You can use Array.indexOf.

var words = ['banana', 'orange', 'apple', 'peach'];
var guess1 = document.getElementById("input").value;

// Finds the index of the given word in the array
// If it returns -1, the word is not in there
// Else returns the index of the word in the array
var index = words.indexOf(guess1);

More info about Array.indexOf can be found here

Improve this answer

Comments

0 
function yourGuess() {
  var words = ['banana', 'orange', 'apple', 'peach'];
  var guess1 = document.getElementById("input").value;


  var answerEl = document.getElementById("answer");

  if (words.indexOf(guess1) > -1) {
      answerEl.innerHTML = "Correct!";
  } else {
      answerEl.innerHTML = "Wrong!";
  }
}
Improve this answer

1 Comment

Good answer. +!
0 
correct=false
for(x=0;x<words.length;x++){

  if(guess1==words[x]){

    document.getElementById("answer").innerHTML = "Correct!";
    correct=true
    break

  }
}
if(!correct){

  document.getElementById("answer").innerHTML = "Wrong!";

}
Improve this answer

1 Comment

Please add some more explanation..
0

Your variable words is array, so you need to loop it and check if the guess value is equal to concurrent array.

    for(var counter = 0; counter < words.length; counter++){
    if(words[counter] != guess1){
          document.getElementById("answer").innerHTML = "Wrong!";
    }else{
      document.getElementById("answer").innerHTML = "Correct";
    }
}
Improve this answer

Comments

0 

function yourGuess() {
  var n = 0;
  var words = ['banana', 'orange', 'apple', 'peach','banana'];
  var guess1 = document.getElementById("input").value;

  var found = words.filter(function(item) {
    return item === guess1
  });

  //wrong answer
  if (found.length <= 0) {
    document.getElementById("answer").innerHTML = "Wrong!";
  } else {
    document.getElementById("answer").innerHTML = found.length + " Correct!";
  }
}
<form>
  Input:
  <input type="text" name="input" id="input">
  <br>
  <br>Output:
  <input type="text" name="output" id="output">
  <br>
  <input type="submit" value="submit" onclick="yourGuess()" id="submit">
</form>


<div id="answer"></div>

Improve this answer

Comments

-4

Try to use toString() on guess1 and words. Comparing two strings should work.

Improve this answer

1 Comment

['banana', 'orange', 'apple', 'peach'].toString() will return "banana,orange,apple,peach". You simply cannot compare the two strings, but with this manipulation you must check if the former string contains the latter. This will fail if user inputs "ban" as "banana" contains "ban". The result of inputting "ban" would be "Correct!", yet should result in "Wrong!".

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.