jquery store input value into empty array element

Question

I have this array

 var foods = new Array();
    foods = [
        { id:  1, correct:'icecream', display: 'icecream',  response: ''},
        { id:  2, correct:'sundae', display: 'sundae',  response: ''},

    ];

and this html div

<div id="showfoods" class="foodlist">
    <div <input id="inputFoodChoice"class="foodinput" /></div>
        </div>

Here's a jquery portion of what will happen with the form portion of the project

function FoodDisplay()
    {
    var txtTrial = "";

    $("#showfoods").hide();

    txtTrial = trials[curTrial].display;

    $("#textPrompt").html(txtTrial);

    $("#showfoods").show();

    $("#inputFoodChoice").val('');
    $("#inputFoodChoice").focus();


}

The word "icecream" will appear with a form box below it and what the user will do is enter the exact word, icecream, then press enter (ltr==13)

What I want is to store the value the person types into the empty "response" portion of the foods array, then to compare this with the value of "correct" in the foods array. depending on whether or not the person gets it right, a message will pop up saying you got it! or incorrect!

after that message appears for however long, it will show the word "sundae" in the same manner.

I'm having trouble storing the input value/comparing it with the correct value. Could someone please help?

I guess in a sense I want it to "edit" the response value in foods array, so I can take that value and compare it to the input value, or is that even necessary?

Just a side note: you can simply var foods = [{...}, {...}]; — Oleg
– Oleg, Commented Apr 4, 2013 at 19:23
var foods = new Array(); foods = [...] is wasting memory by creating an object then throwing it away. — 000
– 000, Commented Apr 4, 2013 at 19:48

Amy · Accepted Answer · 2013-04-04 19:50:55Z

1

It helps to store the user's response in case you want to output a summary of how they did and what they typed for each one.

You need a function to check the input value with your list:

var checkInputValue = function () {
    trials[curTrial].response = input.val();    // store user's input into response
    if (trials[curTrial].response === trials[curTrial].correct) {    // users input is equal to the correct text
        alert('Correct!');
    } else {
        alert('Incorrect!');
    }
    curTrial++;    // next trial
    showTrial();
};

And I recommend you isolating the logic for showing a question, so you can call the same function for each qustion, I moved your code into here:

var curTrial = 0;
var input = $("#inputFoodChoice");
var container = $("#showfoods");
var prompt = $("#textPrompt");
var showTrial = function() {
    container.hide();
    if (curTrial < trials.length) {
        txtTrial = trials[curTrial].display;
    } else {
        alert("No more questions left.");
    }
    prompt.html(txtTrial);
    container.show();
    input.val('');
    input.focus();        
};

See fiddle: http://jsfiddle.net/amyamy86/jSyfy/

My example uses a button click to trigger the checkInputValue(), you can change it for your needs and attach the keydown/keypressed event for the enter key.

answered Apr 4, 2013 at 19:50

Amy

7,5262 gold badges22 silver badges31 bronze badges

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

1 Comment

Y. Zhang Over a year ago

Thank you @sweetamylase! This is pretty much what I was trying to do

Collectives™ on Stack Overflow

jquery store input value into empty array element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related