Enter 키를 누를 때 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); 

을

필자는 필자가 enterUrl 키를 누를 때 사용자가 입력 한 값으로 'userEntry'변수를 설정하는 'decideUserChoice'함수를 가져 오는 것으로 파악할 수 없습니다. 이 문제를 해결할 수있는 더 쉬운 방법이있을 것입니다. 나의 목표는 일련의 질문을 사용자에게 제기하고 Enter 키를 누른 다음 페이지에 표시된 메시지를 추가로 표시하는 것입니다.

Answer 1

당신은 다만 할 수 있습니다

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

하지만 조심, document.getElementsByName(...) 지정된 이름을 가지는 모든 요소의 배열을 반환합니다. document.getElementById(...)을 사용하면 페이지에 주어진 id의 요소 만 반환 할 수 있습니다 (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 기능을 수정하십시오. 이것은 티에리 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;