Comparing Array to what a user has filled in?

JavaScript
#1

Hello!

I’m creating a game where a user is presented with an English word, and i want the user to fill in the same word in Swedish in the box right next to the English word.

I have made two arrayas, one with all the English words, and one with Swedish words.
The correct answer to array items number 4 in first array, is the one with number 4 in the other array and so on.

But now i’m not sure how i can compare if what the user types in the box is the same as the word presented to them. The English word that appears is taken random from anywhere in the array.

One way would of course be a lot of if statements but thats not how i would like to go about things due to the fact that i later will try to add a function so that the user could add their own words with the result.

I’m sorry if the question is a bit confusing, i will answer any questions if you intend to help me, thanks a lot in advance! :slight_smile:

#2

how? do you get a random number and make that the array index?
then use that same index in the other array to extract the word in the other language

or change structure and use one single array with objects inside

[
  {
    en: "hello",
    sw: "..."
  },
  {
    en: "..."
    sw: "..."
  }
  ...
]
#3

var randomGlosa = Math.floor(Math.random() * glosorEng.length);

And then i set innerHTML of the “English Word container” myArray[randomGlosa];

#4

So what is the problem?

#5

Well the problem is I’m new to Javascript and i currently have brain collapse ;).

I have 3 variables

var glosorEng = ["World", "Country", "Cat", "Dog", "Computer", "Fire", "Mousepad", "Math", "Russia"]
var glosorSV = ["Värld", "Land", "Katt", "Hund", "Dator", "Eld", "Musmatta", "Matematik", "Ryssland",]
var randomGlosa = Math.floor(Math.random() * glosorEng.length);

And a function “add” and it will randomly take an English word out of the Array and type it in a DIV container. Lets say the word is “Fire”, and the user types “Eld” which is the correct answer in this case.

I though i could do this

function checkAnswer(){

 for(i=0;i<glosorEng.length;i++)

 {

     if(glosorEng[randomGlosa] == glosorSV[randomGlosa])

     {

         alert("CORRECT!")

     }

     else {

         alert("Try again!")

     }
 }
}

And this does not work, and this is how i though it would be done.

bare with me, I’m a bit slow today… :zzz:

Cheers!

#6

You are comparing two strings from two different languages, so they will definitely not be equal. What you need to compare is the value entered by the user to glosorSV[randomGlosa]

#7

Yeah that i do know :slight_smile:

But i though because that “randomGlosa” is a number, it would work this way? :slight_smile:

#8

randomGlosa represents the index. You are comparing the element of two arrays having the same index. Let’s say randomGlosa is equal to 2. That means the element of the glosorEng array would be “Cat” and the element of the glosorSV array would be “Katt”. Your if statement is checking if “Cat” is equal to “Katt”. They are not equal.

#9

Oh, so i somehow have to save what the user typed in a index varible and compare it to the the index numbret the random generated word had? :slight_smile:

#10

You just need to capture what the user typed in and compare it to the element of the glosorSV array with the index of the same value as randomGlosa.

if(userEnteredValue === glosorSV[randomGlosa]) {
#11

I’m sorry, I’ve tried this but it does not work :confused:

#12

What does the code look like which assigns a value to userEnterValue?

Actually, can you put your code on Codepen and post a link to it, so we can see your full code?

Also, why did you mark your topic Solved?

Thank you.

#13

Hey again. I’m not sure why it says solved, not sure how i did that by accident if it was me, anyhow its not solved. I know i can’t check if the words are the same because they are both in a different languages. So far i’m understanding. I also understand that i somehow have to check if the values.

However i do not understand how to do this, even though I’m pretty sure its very easy and basic. Here is a link to codepen, thanks!

ps This is a school project, so i’m 100% interessted in learning, not getting code from somebody else, also this forum will be added in the code as a comment from where i got the idea.

Cheers! :slight_smile:

#14

The reason it did not work is because of two problems with your code:

  1. To get the value of an input element, you do not use innerHTML. Do some research on how to get the value of an input element.

  2. Once you figure out #1 above, the next thing you need to think about is where/when should you actually get the value for userEnter. Currently, you assign a value to it when the page loads. The problem is, when the page loads, the user has not yet typed anything into the textbox. You need to think about where it makes sense to capture the value and assign it to userEnter.

#15

EDIT : I’ve made it work!! :slight_smile: Thanks for helping know how to think regarding solving the issue, thanks again!! :slight_smile:

Hey again, thanks for the quick reply :slight_smile:

  1. To get the value of an input element, you do not use innerHTML. Do some research on how to get the value of an input element.

Ops my bad, it should of course say .value not innerHTML :slight_smile:

  1. Once you figure out #1 above, the next thing you need to think about is where/when should you actually get the value for userEnter. Currently, you assign a value to it when the page loads. The problem is, when the page loads, the user has not yet typed anything into the textbox. You need to think about where it makes sense to capture the value and assign it to userEnter.

This seems very logical, I’ve moved the var that takes the value of what the user has typed inside of the “checkAnswer” function, so now when that function is called upon the user has actually typed something.

So i think i have solved the 2 problems you were pointing out, or am i misstaken?

Cheers! :slight_smile:

#16