5

私はロゴのような基本的なタートル グラフィックス インタープリターを数年前に開発しましたが、それを Web に載せたくありません (私のいとこが私を悩ませ続けているため)。私は HTML と Javascript のコーディングにはまったく慣れていませんが、試してみて、これを学習体験として取り入れてみようと思いました。

以下のコードは、基本的な UI 用です (私の UI は非常に見苦しく、後でクリーンアップします)。

「cmd-form」のonsubmitと呼ばれるJavascript関数pushCmdを作成しました。

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

フォームは以下のように宣言されます。

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

pushCmd 関数は、div "source-container" の HTML コンテンツを変更する必要があります。デフォルトでは以下のようになります。

<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バージョン26.0.1410.63を使用しています（そうではないと思います）。

さらに情報が必要な場合や、これに関する完全な HTML ソースが必要な場合はお知らせください。

4

6 に答える 6

1

フォームは実際には空のアクションに送信されています。空のアクションは通常、現在のページを更新することになります。そのため、ページの更新が速すぎて、source-containerdiv が瞬時に変更されたように見える場合があります。

送信ボタンを使用する代わりに、type=button を試してから、JavaScript でそのボタンの onclick を設定してください。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;

このコードの例として、この codepen を参照してください: http://codepen.io/keithwyland/pen/scAJy

于 2013-04-24T21:11:01.243 に答える