CODEWITHSUNDEEP
javascriptjqueryhtml
optatus
optatus

Reputation: 11

javascript set a variable value when enter is pressed

I am quite new to JavaScript, but I'm certain there has to be an easy way to set a variable value when enter is pressed in an HTML text input box.

<input type='text' name='userEntry' class='inner-choice-entry' placeholder='Type your answer here' />

And the following is running in the background, for example:

var userEntry;
function determineUserChoice(e) {
    if (e.which == 13 || e.keyCode == 13) {
        userEntry = document.getElementsByName('userEntry').value;      
    }
};

The following will be used to display a message to the user and prompt them to enter a value:

displayedLine = 'Please enter your name.';
$('.inner-content-text').html(displayedLine);
displayedChoiceLine = 'Your name is:';
$('.inner-choice-text').html(displayedChoiceLine);
determineUserChoice();
charName = userEntry;
$('.inner-content-sidebar-text-playername').html(charName);

For the life of me, I cannot figure out to get the function 'determineUserChoice' to set the 'userEntry' variable to whatever the user has entered WHEN the enter key is pressed. There is probably an easier way to go about this. My goal is to have a series of questions posed to the user and then displayed on the page after the enter key has been pressed, followed by additional displayed messages.

Upvotes: 1

Views: 1030

Answers (3)

Thierry J
Thierry J

Reputation: 2189

You can just do:

<input onkeypress="determineUserChoice(event)" type='text' name='userEntry' class='inner-choice-entry' placeholder='Type your answer here' />

Beware though, document.getElementsByName(...) returns an array of all element with the given name. Use document.getElementById(...) to return the only element with the given id in the page (as ids are to be unique in a page).

Upvotes: 0

Harry
Harry

Reputation: 89770

You can do the below.

Attach a Event Handler for key-down event on your text-box. I have used its class='inner-choice-entry to reference it. 

$('.inner-choice-entry').keydown(determineUserChoice);

Note: If you are OK with adding an id attribute to your input field, you can use $('#userEntry') instead of $('.inner-choice-entry').

Modify the determineUserChoice function as below. This is to overcome the point mentioned in Thierry J's answer. The getElementsByName method returns an array of all elements with the given name. Using getElementsByName('userEntry')[0].value will take the value of only the first such element with name=userEntry.

function determineUserChoice(e) {
    if (e.which == 13 || e.keyCode == 13) {
        console.log('ok');
        userEntry = document.getElementsByName('userEntry')[0].value; //note the change here.
        console.log(userEntry);
    }
};

Note: Again as mentioned above, if you add an id to the field, you can get the value as follows.

userEntry = document.getElementById('userEntry').value;

Upvotes: 2

Barmar
Barmar

Reputation: 781726

document.getElementsByName returns a nodeList, not a single element. You need to index it to get the element before getting its value, so it should be:

userEntry = document.getElementsByName('userEntry')[0].value;

I assume you're binding the handler with addEventHandler somewhere, and just didn't show that code.

Upvotes: 0

Related Questions