게임을 만들고 있는데 처음에 이름을 묻는 메시지가 표시됩니다. 이 이름을 변수로 저장하고 싶습니다. 이 HTML 코드가 있습니다:
<form id="form" onsubmit="return false;">
<input style=position:absolute;top:80%;left:5%;width:40%; type="text" id="userInput">
<input style=position:absolute;top:50%;left:5%;width:40%; type="submit" onclick="name()">
</form>
그리고 이것은 자바 스크립트 부분입니다:
function name()
{
var input = document.getElementById("userInput");
alert(input);
}
자바스크립트에서 name
은 예약어이므로 작동하지 않습니다. 함수 이름을 다른 이름으로 변경하세요.
http://www.quackit.com/javascript/javascript_reserved_words.cfm 참조
<form id="form" onsubmit="return false;">
<input style="position:absolute; top:80%; left:5%; width:40%;" type="text" id="userInput" />
<input style="position:absolute; top:50%; left:5%; width:40%;" type="submit" onclick="othername();" />
</form>
function othername() {
var input = document.getElementById("userInput").value;
alert(input);
}
먼저 마크업의 이식성/재사용성을 높입니다. 또한 버튼의 유형을 온제출
속성을 사용하는 대신 버튼
으로 설정했습니다. 폼이 서버와 상호 작용해야 하는 경우 '유형' 속성을 '제출'로 전환할 수 있습니다.
<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
<label id='nameLable' for='nameField'>Create a username:</label>
<input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
<button id='subButton' type='button'>Print your name!</button>
</div>
</form>
<div>
<p id='result'></p></div>
</div>
다음으로 사용자 이름을 변수로 검색하는 일반 함수를 작성합니다. 이 함수는 사용자명이 저장된 변수에 최소 세 글자가 포함되어 있는지 확인합니다. 이 상수는 원하는 상수로 변경할 수 있습니다.
function getUserName() {
var nameField = document.getElementById('nameField').value;
var result = document.getElementById('result');
if (nameField.length < 3) {
result.textContent = 'Username must contain at least 3 characters';
//alert('Username must contain at least 3 characters');
} else {
result.textContent = 'Your username is: ' + nameField;
//alert(nameField);
}
}
다음으로 버튼에 대한 이벤트 리스너를 만들었습니다. 일반적으로 인라인 자바스크립트 호출을 사용하는 것은 나쁜 습관으로 간주됩니다.
var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);
다음은 작동하고 가벼운 스타일의 데모입니다: