bir oyun yapıyorum ve başlangıçta isminizi soruyor. Bu ismin değişken olarak kaydedilmesini istiyorum. bu html koduna sahibim:
<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>
ve bu da javascript kısmı:
function name()
{
var input = document.getElementById("userInput");
alert(input);
}
Çalışmaz çünkü name
JavaScript'te ayrılmış bir kelimedir. Fonksiyon adını başka bir şeyle değiştirin.
Bkz. 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);
}
İlk olarak, biçimlendirmenizi daha taşınabilir/yeniden kullanılabilir hale getirin. Ayrıca onsubmit
niteliğini kullanmak yerine düğmenin türünü 'button'
olarak ayarladım. Formun bir sunucu ile etkileşime girmesi gerekiyorsa type
niteliğini submit
olarak değiştirebilirsiniz.
<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>
Daha sonra kullanıcı adını bir değişkene almak için genel bir fonksiyon yazın. Kullanıcı adını tutan değişkenin içinde en az üç karakter olduğundan emin olmak için kontrol eder. Bunu istediğiniz sabitle değiştirebilirsiniz.
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);
}
}
Ardından, düğme için bir olay dinleyicisi oluşturdum. Genellikle satır içi js çağrılarına sahip olmak kötü bir uygulama olarak kabul edilir.
var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);
İşte çalışan ve hafifçe şekillendirilmiş bir demo: