Estoy haciendo un juego y al principio te pide tu nombre. Quiero que este nombre se guarde como varible. tengo este código 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>
y esta es la parte de javascript:
function name()
{
var input = document.getElementById("userInput");
alert(input);
}
No funciona porque "nombre" es una palabra reservada en JavaScript. Cambie el nombre de la función por otro.
Véase 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);
}
En primer lugar, haga su marcado más portable/reutilizable. También establecí el tipo de botón a 'botón'en lugar de utilizar el atributo
onsubmit. Puedes cambiar el atributo
typea
submit` si el formulario necesita interactuar con un servidor.
<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>
A continuación escribe una función general para recuperar el nombre de usuario en una variable. Comprueba que la variable que contiene el nombre de usuario tiene al menos tres caracteres. Puedes cambiar esto a cualquier constante que quieras.
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);
}
}
A continuación, he creado un oyente de eventos para el botón. Generalmente se considera una mala práctica tener llamadas js en línea.
var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);
Aquí está una demostración de trabajo y ligeramente con estilo: