Geek asks and answers

I have a specific Javascript function not working, as I expected?

A few years ago I developed a basic graphical interpreter similar to LOGO, I could not post it on the Internet (as my cousin continues to listen to me). Although I am completely new to HTML, Javascript coding, I thought I would try and take this as a learning experience.

The code below is for the base interface only (my interface looks very ugly and I will clear it later).

I wrote a pushCmd Javascript function called 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;
            }

The form is announced as shown below.

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

The pushCmd function should modify the HTML content of div-source-container, which looks lower by default.

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

, (, "FWD 100" ). "source-container" "FWD 100". , "RT 90", "FWD 100
RT 90". , .

. "source-container" , "NO CODE". , - , ?

get post, . Javascript. Google chrome Version 26.0.1410.63, ( , ).

, , HTML .

+5
6

. . , , source-container div.

, "", type =, onclick javascript. ( id="" "" 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;

coden: http://codepen.io/keithwyland/pen/scAJy

+1

- , HTML , HTTP-, . ( ), false , return false; :

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

HTML-, onsubmit:

onsubmit="return pushCmd()"
+3

false pushCmd onsubmit onsubmit="return pushCmd();", .

, :

srcText = "<br>" + cmdText;


srcText += "<br>" + cmdText;

:

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

, cmdText srcText. +=, srcText cmdText.

+2

, .

, , . return false; .

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

, , , .

, AJAX, .

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

You need to return falseevents from the handler onsubmitso that the page does not refresh. When you click the submit button, the event handler starts, and then the form immediately submits, which reloads the page. If you return falsefrom the event handler, this prevents the default behavior. 

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

In addition, you will need return pushCmd()instead pushCmd()in the event handler.

0
source

More articles:


All Articles