document.getElementById ("#"). InnerHTML = "Hello" + Benutzer + "!"; nicht funktioniert

Question

ich eine Javascript-Funktion haben wie folgt:

function userNameEntered() { 
var user = document.forms["user"] ["name"].value; 
document.getElementById("Name").innerHTML = "Hello " + text + "!"; 
} 

Es greift auf diese <form>:

<form method="get" name="user" onsubmit="userNameEntered()"> 
<p>Name:</p> 
<input type="text" name="name" autocomplete="off" id="username"> 
<input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit"> 
</form> 

Wenn ich es ausprobieren ich den Text für weniger als eine Sekunde, dann verschwinden implementieren zu sehen. Irgendwelche Ideen? Ich dachte, es könnte sein, weil user nicht in einem globalen Bereich ist, also habe ich versucht, es vor der Funktion zu deklarieren, und es überhaupt nicht angezeigt. Ich bin etwas verwirrt, da ich keine möglichen Probleme sehen kann.

Answer 1

Verhindern Sie die Standardformularaktion (die mit dem Neuladen der Seite übermittelt wird), indem Sie false von onsubmit handler (onsubmit="return userNameEntered()") zurückgeben. Sie müssen auch return false von userNameEntered Funktion.

Dann vergessen Sie nicht, redundante onclick Handler zu entfernen (vermeiden Sie onclick für die Formularübergabe) und fügen Sie Element mit ID = "Name" irgendwo hinzu.

function userNameEntered() { 
 
    var user = document.forms["user"]["name"].value; 
 
    document.getElementById("Name").innerHTML = "Hello " + user + "!"; 
 
    return false; 
 
}

<form method="get" name="user" onsubmit="return userNameEntered()"> 
 
    <p>Name: <span id="Name"></span></p> 
 
    <input type="text" name="name" autocomplete="off" id="username"> 
 
    <input type="submit" value="Submit" id="usersubmit"> 
 
</form>

Beachten Sie auch, dass Sie wahrscheinlich "Hello " + user + "!"; nicht text wollen.

Answer 2

Sie müssen das Senden des Formulars stoppen, da die Seite neu geladen wird. Deshalb siehst du es kurz und dann "verschwindet".

Um dies zu stoppen, müssen Sie das Formular stoppen vorgelegt werden:

function userNameEntered() { 
    var text = document.forms["user"]["name"].value; 
    document.getElementById("name").innerHTML = "Hello " + text + "!"; 
    return false; 
} 

Sie haben auch einige Fehler: Ihr Formularelement name ist, aber Sie verweisen Name weisen Sie var user aber text verwenden.

Answer 3

Es verschwindet, weil die Seite neu geladen wird, nachdem das Formular abgeschickt wurde.

diesen Versuch zu stoppen:

function userNameEntered() { 
    var user = document.forms["user"] ["name"].value; 
    document.getElementById("Name").innerHTML = "Hello " + text + "!"; 
    return false; 
} 

Und:

<form method="get" name="user" onsubmit="return userNameEntered()"> 
    <p>Name:</p> 
    <input type="text" name="name" autocomplete="off" id="username"> 
    <input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit"> 
</form> 

Answer 4

Ein Klick auf eine Schaltfläche "Senden", verhindern Standardformular Aktion nicht auf diese Werte occurred..due wird

verschwinden

Answer 5

Verwenden Sie Return false in Ihrer Funktion

function userNameEntered() { 
    var user = document.forms["user"] ["name"].value; 
    document.getElementById("enter code hereName").innerHTML = "Hello " + text + "!"; 
    return false; 
    }