How to get my "input a word" script to work using JavaSscript or jQuery?

Question

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>

Thanks everyone for all your help!!! – Danielle Nov 26 '16 at 03:03 — Danielle, Nov 26 '16 at 03:03

Daerik · Accepted Answer · 2016-11-25T01:15:23.920

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.

`var answer = $.inArray(guessInput, wordsArray) !== -1 ? 'Correct!' : 'Wrong!'; $('#answer').text(answer );` would be more concise but +1 — Wesley Smith, Nov 25 '16 at 01:33

score 2 · Answer 2 · answered Nov 25 '16 at 01:05

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

danday74 · Answer 3 · 2016-11-25T01:06:05.750

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!";
  }
}

edited Nov 25 '16 at 01:06

answered Nov 25 '16 at 01:04

danday74

52,471
49
232
283

Good answer. +! – J. Allan Nov 25 '16 at 01:05

score 0 · Answer 4 · answered Nov 25 '16 at 01:07

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!";

}

answered Nov 25 '16 at 01:07

cj p

3
1

Please add some more explanation.. – prasanth Nov 25 '16 at 05:10

score 0 · Answer 5 · answered Nov 25 '16 at 01:12

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";
    }
}

score 0 · Answer 6 · answered Nov 25 '16 at 01:49

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>

score -4 · Answer 7 · edited Nov 25 '16 at 07:46

-4

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

edited Nov 25 '16 at 07:46

thedp

8,350
16
53
95

answered Nov 25 '16 at 01:00

Kanyar

3
1
7

['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!". – Daerik Nov 25 '16 at 01:25

How to get my "input a word" script to work using JavaSscript or jQuery?

7 Answers7