javascript задает значение переменной при нажатии клавиши

Question

Я совершенно новичок в JavaScript, но я уверен, что должен быть простой способ установить значение переменной, когда вводится ввод в поле ввода текста HTML.

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

И работает в фоновом режиме, следуя, например:

var userEntry; 
function determineUserChoice(e) { 
    if (e.which == 13 || e.keyCode == 13) { 
     userEntry = document.getElementsByName('userEntry').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); 

В течение жизни я не могу понять, как заставить функцию «defineUserChoice» установить переменную userEntry на то, что пользователь ввел, КОГДА нажата клавиша ввода. Вероятно, есть более простой способ сделать это. Моя цель состоит в том, чтобы задать ряд вопросов, заданных пользователю, а затем отобразиться на странице после нажатия клавиши ввода, а затем дополнительных отображаемых сообщений.

Answer 1

Вы можете просто сделать:

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

Остерегайтесь, хотя, document.getElementsByName(...) возвращает массив всех элементов с заданным именем. Используйте document.getElementById(...), чтобы вернуть единственный элемент с данным id на странице (поскольку идентификаторы должны быть уникальными на странице).

Answer 2

document.getElementsByName возвращает nodeList, а не один элемент. Вам нужно индексировать его, чтобы получить элемент перед тем, как его значение, поэтому оно должно быть:

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

Я предполагаю, что вы связываете обработчика с addEventHandler где-то, и просто не показывают, что код.

Answer 3

Вы можете сделать следующее.

Прикрепите обработчик событий для события ввода-вывода в текстовом поле. Я использовал его class='inner-choice-entry для ссылки на него.

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

Примечание: Если все в порядке с добавлением атрибута id к вашему полю ввода, вы можете использовать $('#userEntry') вместо $('.inner-choice-entry').

Измените функцию determineUserChoice, как показано ниже. Это нужно для преодоления точки, упомянутой в ответе Тьерри Дж. Метод getElementsByName возвращает массив всех элементов с заданным именем. Использование getElementsByName('userEntry')[0].value примет значение только первого такого элемента с 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); 
    } 
}; 

Примечание: Опять же, как упоминалось выше, если добавить id в поле, вы можете получить значение следующим образом.

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