Ich mache ein Spiel und am Anfang wird man nach seinem Namen gefragt. Ich möchte, dass dieser Name als variabel gespeichert wird. Ich habe diesen HTML-Code:
<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>
und das ist der javascript Teil:
function name()
{
var input = document.getElementById("userInput");
alert(input);
}
Es funktioniert nicht, weil "Name" ein reserviertes Wort in JavaScript ist. Ändern Sie den Funktionsnamen in etwas anderes.
Siehe 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);
}
Zunächst sollten Sie Ihr Markup portabler/wiederverwendbar machen. Ich habe auch den Typ der Schaltfläche auf 'button'
gesetzt, anstatt das Attribut onsubmit
zu verwenden. Sie können das Attribut type
auf submit
umstellen, wenn das Formular mit einem Server interagieren muss.
<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>
Als nächstes schreiben Sie eine allgemeine Funktion zum Abrufen des Benutzernamens in eine Variable. Sie prüft, ob die Variable, die den Benutzernamen enthält, mindestens drei Zeichen enthält. Sie können dies in eine beliebige Konstante ändern.
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);
}
}
Als nächstes habe ich einen Ereignis-Listener für die Schaltfläche erstellt. Es gilt allgemein als schlechte Praxis, Inline-Js-Aufrufe zu haben.
var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);
Hier ist eine funktionierende und leicht gestylte Demo: