当按下回车键时，javascript设置一个变量值

Question

我对JavaScript非常陌生，但是我敢肯定，当在HTML文本输入框中按下enter键时，必须有一种简单的方法来设置变量值。

<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);

为了我的一生，我无法弄清楚获得函数'determineUserChoice'来将'userEntry'变量设置为按下Enter键时用户输入的内容。 可能有一个更简单的方法可以解决此问题。 我的目标是向用户提出一系列问题，然后在按Enter键之后在页面上显示这些问题，然后显示其他消息。

Answer 1

您可以执行以下操作。

在文本框中附加用于按键事件的事件处理程序。 我用它的class='inner-choice-entry来引用它。

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

注意：如果可以在输入字段中添加id属性，可以使用$('#userEntry')代替$('.inner-choice-entry') 。

修改如下的determineUserChoice函数。 这是为了克服Thierry J的回答中提到的观点。 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;

Answer 2

您可以这样做：

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

但是请注意， document.getElementsByName(...)返回具有给定名称的所有元素的数组。 使用document.getElementById(...)返回页面中唯一具有给定id元素（因为id在页面中是唯一的）。

Answer 3

document.getElementsByName返回一个nodeList ，而不是单个元素。 您需要先对其进行索引以获取元素，然后再获取其值，因此应为：

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

我假设您在某处将处理程序与addEventHandler绑定在一起，而只是没有显示该代码。