Selbstdefinierte Javascript-Funktion funktioniert nicht wie erwartet?

Question

Ich hatte vor ein paar Jahren einen LOGO-ähnlichen Turtle-Grafik-Basic-Interpreter entwickelt, den ich nicht ins Internet stellen wollte (weil mich mein Cousin immer wieder nervt). Obwohl ich ziemlich neu in HTML bin, Javascript-Programmierung dachte ich, ich würde es versuchen & nehmen Sie dies als eine Lernerfahrung.

Der folgende Code ist nur für die grundlegende Benutzeroberfläche (meine Benutzeroberfläche sieht sehr hässlich aus und ich werde es später aufräumen).

Ich habe eine Javascript-Funktion pushCmd geschrieben, die onsubmit der "cmd-form" heißt.

function pushCmd() 
      { var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
       var srcElement = document.getElementById("source-container"); 
       var srcText = new String(srcElement.innerHTML); 
       srcText = srcText.toUpperCase(); 
       if (srcText.indexOf("NO CODE") != 0) 
       { 
        srcText = cmdText; 
       } 
       else 
       { 
        srcText += "<br>" + cmdText; 
       } 
       srcElement.innerHTML = srcText; 
      } 

Das Formular wird wie folgt deklariert.

Die pushCmd-Funktion sollte den HTML-Inhalt des div "source-container" ändern, der standardmäßig wie folgt aussieht.

<div id="source-container">NO CODE</div> 

Nachdem ich den ersten Text (sagen "FWD 100") einreichen. Der Inhalt des "Quellcontainers" sollte auf "FWD 100" geändert werden. Dann wenn ich "RT 90" einreiche, sollte der Inhalt "FWD 100
RT 90" sein. Das ist, was ich davon erwarte.

Aber wenn ich den Text einreiche. Der Inhalt des "Source-Containers" ändert sich nur für einen Augenblick und kommt dann wieder auf "NO CODE" zurück. Warum passiert das, kann jemand bitte darauf hinweisen, wo mein Fehler liegt?

Ich versuchte beide erhalten & Post-Methoden, aber das Ergebnis ist das gleiche. Ich kann auch keine Fehler oder Warnungen in der Javascript-Konsole sehen. Ich verwende Google Chrome Version 26.0.1410.63, wenn das wichtig ist (ich denke nicht).

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen oder die vollständige HTML-Quelle dafür benötigen.

Answer 1

Ihre Form auf die leere Aktion tatsächlich einreicht. Bei einer leeren Aktion wird normalerweise die aktuelle Seite aktualisiert. So kann Ihre Seite so schnell auffrischen, dass es scheint, eine sofortige Änderung der source-container Div zu sein.

Anstatt eine Submit-Schaltfläche zu verwenden, versuchen Sie es mit der Taste = und klicken Sie dann im JavaScript auf diese Schaltfläche. (Beachten Sie die id="" auf die Schaltfläche Senden in der HTML)

HTML

<div id="command-container"> 
    <form id="cmd-form" action="" onreset="resetSource()" method="get"> 
    <input type="text" id="cmd-text" name="command" size="80" /> 
    <input type="button" id="btnSend" value="Send" /> 
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Run" /> 
    </form> 
</div> 

<div id="source-container">NO CODE</div> 

Javascript

function pushCmd() 
{ 
    var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
    var srcElement = document.getElementById("source-container"); 
    var srcText = new String(srcElement.innerHTML); 
    srcText = srcText.toUpperCase(); 
    alert(cmdText); 
    if (srcText.indexOf("NO CODE") != 0) 
    { 
     srcText = cmdText; 
    } 
    else 
    { 
     srcText += "<br>" + cmdText; 
    } 
    srcElement.innerHTML = srcText; 
} 

document.getElementById('btnSend').onclick = pushCmd; 

sehen dies als ein Beispiel dieses Codes codepen: http://codepen.io/keithwyland/pen/scAJy

Answer 2

Sie senden wahrscheinlich die ganze Seite an den Server, was dazu führt, dass sie sich aktualisiert und Sie daher den gleichen Standardwert zurückbekommen.

Um dies zu verhindern, können Sie versuchen, AJAX zu verwenden, mit dem Sie Daten an den Server senden können, ohne die gesamte Seite zu aktualisieren.

Eine Möglichkeit, um zu verhindern, dass Ihre Seite an den Server gesendet wird, besteht darin, return false; zu Ihrer Funktion hinzuzufügen.

function pushCmd() 
      { var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
       var srcElement = document.getElementById("source-container"); 
       var srcText = new String(srcElement.innerHTML); 
       srcText = srcText.toUpperCase(); 
       if (srcText.indexOf("NO CODE") != 0) 
       { 
        srcText = cmdText; 
       } 
       else 
       { 
        srcText = "<br>" + cmdText; 
       } 
       srcElement.innerHTML = srcText; 
       retrun false; 
      } 

Answer 3

Sie müssen false von pushCmd zurückzukehren, und ändern Sie das onsubmit Attribut onsubmit="return pushCmd();" sonst das Formular selbst einreichen und aktualisieren Sie die Seite.

Außerdem müssen Sie diese Zeile ändern:

srcText = "<br>" + cmdText; 

zu:

srcText += "<br>" + cmdText; 

Dies entspricht:

srcText = srcText + "<br>" + cmdText; 

was bedeutet, dass Sie cmdText anhängen wollen srcText.Wenn Sie += nicht haben, überschreiben Sie im Grunde srcText mit nur cmdText.

Answer 4

Sie reichen das Formular ein, damit die Seite aktualisiert wird und sie in den ursprünglichen Zustand zurückversetzt wird.

Je nachdem, was Sie letztendlich benötigen, besteht eine Lösung darin, die Formularübermittlung zu verhindern. Sie können dies mit einem einfachen return false; am Ende Ihrer Funktion tun.

function pushCmd() { 
    var cmdText = document.forms["cmd-form"]["cmd-text"].value; 

    var srcElement = document.getElementById("source-container"); 
    var srcText = srcElement.innerHTML; 
    srcText = srcText.toUpperCase(); 

    if (srcText.indexOf("NO CODE") != 0) { 
     srcText = cmdText; 
    } else { 
     srcText = "<br>" + cmdText; 
    } 
    srcElement.innerHTML = srcText; 

    return false; 
} 

Answer 5

Sie benötigen false von Ihren onsubmit Event-Handler zurück, um die Seite von erfrischenden selbst zu verhindern. Wenn Sie die Senden-Schaltfläche drücken, wird Ihr Ereignishandler ausgelöst, aber dann wird sofort das Formular gesendet, das die Seite erneut lädt. Wenn Sie false von einem Ereignishandler zurückgeben, wird das Standardverhalten verhindert.

function pushCmd() 
      { var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
       var srcElement = document.getElementById("source-container"); 
       var srcText = new String(srcElement.innerHTML); 
       srcText = srcText.toUpperCase(); 
       if (srcText.indexOf("NO CODE") != 0) 
       { 
        srcText = cmdText; 
       } 
       else 
       { 
        srcText = "
" + cmdText; 
       } 
       srcElement.innerHTML = srcText; 
       return false; 
      } 

Darüber hinaus werden Sie return pushCmd() müssen, anstatt nur pushCmd() in Ihrem Event-Handler.

Answer 6

Es passiert, weil HTML-Formulare an den Server senden, indem sie eine neue HTTP-Anfrage senden, die in Ihrem Fall mit dem leeren Aktionsattribut der Aktualisierung der Seite in Ihrem Browser ähnelt. Um den Browser aus der Durchführung der Standardaktion (Absenden des Formulars) zu verhindern, dass Sie false von Ihrer Funktion zurückgeben kann, durch return false; als letzte Zeile in sie und fügte hinzu:

function pushCmd() { 
    var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
    var srcElement = document.getElementById("source-container"); 
    var srcText = srcElement.innerHTML.toUpperCase(); 

    if (srcText.indexOf("NO CODE") !== 0) 
    { 
     srcText = cmdText; 
    } 
    else 
    { 
     srcText += "<br>" + cmdText; 
    } 
    srcElement.innerHTML = srcText; 
    return false; 
} 

Dann wird Ihr HTML die Rückkehr Attribut ändern zurückzukehren Wert Ihrer Funktion aus der onsubmit:

onsubmit="return pushCmd()"