Własna funkcja JavaScript nie działa zgodnie z oczekiwaniami?

Question

Kilka lat temu opracowałem podobny do LOGO podstawowy tłumacz graficznego żółwia, nie będę go zamieszczał w sieci (bo mój kuzyn ciągle mnie o to ostrzega). Chociaż jestem całkiem nowym użytkownikiem HTML, kodowanie JavaScript myślałem, że spróbuję go wypróbować &.

Poniższy kod jest przeznaczony tylko dla podstawowego interfejsu użytkownika (mój interfejs użytkownika wygląda bardzo brzydko, a ja posprzątam go później).

Napisałem funkcję Javascript pushCmd, która nazywa się onsubmit "cmd-form".

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; 
      } 

Formularz jest zadeklarowany jak poniżej.

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

Funkcja pushCmd powinna zmienić treść HTML w div "source-container", który domyślnie wygląda jak poniżej.

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

Po przesłaniu pierwszego tekstu (np. "FWD 100"). Zawartość "kontenera źródłowego" powinna zmienić się na "FWD 100". Następnie, jeśli prześlę "RT 90", treść powinna brzmieć "FWD 100
RT 90". Tego właśnie oczekuję.

Ale kiedy przesyłam tekst. Zawartość "kontenera źródłowego" zmienia się tylko na chwilę, a następnie ponownie wraca do "BEZ KODU". Dlaczego tak się dzieje, czy ktoś może wskazać, gdzie leży mój błąd?

Próbowałem obie uzyskać & metod post, ale wynik jest taki sam. Nie widzę żadnych błędów ani ostrzeżeń w konsoli JavaScript. Używam Google Chrome w wersji 26.0.1410.63, jeśli to ma znaczenie (chyba nie).

Proszę dać mi znać, jeśli potrzebujesz więcej informacji lub pełne źródło HTML dla tego.

Answer 1

Twoja forma jest rzeczywiście złożenie do pustego działania. Pusta akcja zazwyczaj kończy odświeżanie bieżącej strony. Twoja strona może być odświeżana tak szybko, że wydaje się być natychmiastową zmianą elementu div o wartości source-container.

Zamiast używać przycisku Wyślij, spróbuj wpisać = przycisk, a następnie ustaw przycisk w javascript. (Uwaga id="" na przycisk Wyślij w 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> 

obsługa 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; 

zobaczyć ten codepen jako przykład tego kodu: http://codepen.io/keithwyland/pen/scAJy

Answer 2

Prawdopodobnie przesyłasz całą stronę na serwer, co spowoduje jej odświeżenie, a tym samym otrzymasz tę samą domyślną wartość.

Aby temu zapobiec, możesz spróbować użyć AJAX, która pozwoli Ci wysłać dane do serwera bez odświeżania całej strony.

Jednym ze sposobów uniemożliwienia przesłania strony do serwera jest dodanie do swojej funkcji return false;.

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

Trzeba powrócić false z pushCmd i zmień atrybut onsubmit="return pushCmd();"onsubmit inaczej forma podda się i odśwież stronę.

Również trzeba zmienić tę linię:

srcText = "<br>" + cmdText; 

do:

srcText += "<br>" + cmdText; 

Jest to odpowiednik:

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

co oznacza, że ​​chcesz dołączyć cmdText do srcText.Jeśli nie masz +=, w zasadzie kończy się nadpisywanie srcText tylko z cmdText.

Answer 4

Przesyłasz formularz, więc strona jest odświeżana, przywracając jej pierwotny stan.

W zależności od tego, czego ostatecznie potrzebujesz, jednym z rozwiązań jest zapobieganie przesyłaniu formularzy. Możesz to zrobić za pomocą prostego return false; na końcu swojej funkcji.

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

Trzeba powrócić false z programu obsługi zdarzeń, aby zapobiec onsubmit stronę z odświeżające się. Po naciśnięciu przycisku przesyłania uruchamia się program obsługi zdarzeń, ale natychmiast zostaje przesłany formularz, który ponownie ładuje stronę. Jeśli zwrócisz false z procedury obsługi zdarzeń, uniemożliwi to zachowanie domyślne.

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; 
      } 

Dodatkowo trzeba return pushCmd() zamiast tylko pushCmd() w Twoim obsługi zdarzeń.

Answer 6

Dzieje się tak, ponieważ formularze HTML przesyłane są do serwera przez wysłanie nowego żądania HTTP, które w twoim przypadku z pustym atrybutem akcji jest podobne do odświeżania strony w przeglądarce. W celu zapobieżenia przeglądarkę wykonywanie domyślną akcję (składając formularz) można powrócić false ze swojej funkcji, dodając return false; jako ostatniej linii w nim:

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; 
} 

Następnie zmień atrybut Twój HTML powrót powrót wartość swojej funkcji z onsubmit:

onsubmit="return pushCmd()"