saya sedang membuat sebuah game dan di awal game tersebut meminta nama anda. Saya ingin nama ini disimpan sebagai varible. saya memiliki kode html ini:
<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>
dan ini adalah bagian javascript:
function name()
{
var input = document.getElementById("userInput");
alert(input);
}
Ini tidak berfungsi karena nama
adalah kata yang dicadangkan dalam JavaScript. Ubah nama fungsi menjadi sesuatu yang lain.
Lihat 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);
}
Pertama, buat markup Anda lebih portabel/dapat digunakan kembali. Saya juga mengatur jenis tombol ke `tombol
daripada menggunakan atribut onsubmit
. Anda dapat mengubah atribut type
menjadi submit
jika formulir perlu berinteraksi dengan server.
<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>
Selanjutnya tulis fungsi umum untuk mengambil nama pengguna ke dalam variabel. Fungsi ini akan memeriksa untuk memastikan variabel yang menyimpan nama pengguna memiliki setidaknya tiga karakter di dalamnya. Anda dapat mengubahnya menjadi konstanta apa pun yang Anda inginkan.
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);
}
}
Selanjutnya, saya membuat event listener untuk tombol. Secara umum dianggap sebagai praktik buruk untuk melakukan panggilan js inline.
var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);
Berikut ini adalah demo yang berfungsi dan bergaya ringan: