1

いくつかの JavaScript と、それが HTML の「テキスト ボックス」を制御する方法に問題があります。

まず、これが私が持っているものです。JavaScript:

function UpdateOrder()
{
    // enable/disable appropriate buttons
    document.getElementById("reset").disabled=false;
    document.getElementById("add").disabled=false;
    document.getElementById("submit").disabled=false;
    document.getElementById("edit").disabled=false;
    document.getElementById("update").disabled=true;

    // Show display box, 'DispCurOrder'
    document.getElementById('all_labels').disabled=true;
}

function EditOrder()
{
    // enable/disable appropriate buttons
    document.getElementById("reset").disabled=true;
    document.getElementById("add").disabled=true;
    document.getElementById("submit").disabled=true;
    document.getElementById("edit").disabled=true;
    document.getElementById("update").disabled=false;

    document.getElementById('all_labels').disabled=false;
}

アイデアは単純です...無効なテキストボックスにダンプされるテキストの「行」を生成するためのボタンと入力がいくつかあります。オペレーターが、入力を行ったことや何かを変更したいことに気付いた場合、[順序の編集] をクリックすると、すべての通常のボタンが無効になり、テキスト ボックスと [更新] ボタンが有効になります。「順序の更新」ボタンはこれを逆にします。

ここで、テキスト ボックスに行を追加するだけで、すべてうまくいきます。各行がテキスト ボックスに追加されていることがわかります (エラー チェックなどを行う別の Java 関数がありますが、重要なのは、テキスト ボックスの内容を取得し、"\n" で解析して、配列, 次にテキストの新しい行を追加します. 次に、配列を取得し、それをすべて新しい文字列としてまとめてテキスト ボックスに戻します. これは、すべてのエラー チェック項目を除いた部分です。

function AppendOrder()
{
    // let's set up an error flag.
    var AppendError="";
    var str1=document.forms["MyForm"].DataEntry1.value;
    var str2=document.forms["MyForm"].DataEntry2.value;

    if( /* checking variable str1 for errors */)
    {
        AppendError="Error in str 1 here";
    }

    if( /* checking variable str1 for errors */)
    {
        AppendError=AppendError+"Error in str 2 here";
    }

    // Display the error message, if there are no errors, it will clear what was there.
    $('#AppendStatus').html(AppendError);

    if(AppendError=="")
    {
        // it's all good, update the display
        // create line of text
        curEntry=str1 + " -- " + str2;

        // let's get the current order into a list
        str=document.getElementById('all_data').innerHTML;

        if(str1=="Empty")
        {
            // make curOrder = to 1 element array of curEntry
            var curOrder=[curEntry];
        }
        else
        {
            // parse str1 into an array and parse it to curOrder.
                    // Then push curEntry on the end.
            var curOrder=str1.split("\n");
            curOrder.push(curEntry);
        }

        // now we should have an array called 'curOrder[]'.  Let's show it 
            // on the web page.
        $('#all_labels').html(curOrder);
    }
}

さて、私が抱えている問題は、「追加」ボタンを使用してディスプレイに1行または2行（またはそれ以上）を追加し、「編集」モード（テキストボックスが有効になっている場所）に入った後です。すべての変更を行っても、[追加] ボタンが機能しません。

奇妙なことに、「リセット」ボタン (単なるリセット ボタン) を押すと、編集後に行ったすべての追加が表示され、編集したものが消えてしまいます。

さて...質問に...テキストボックスについて理解していないことがありますか? それを機能させるために必要なトリックはありますか？私はこれについてすべて間違っていますか？これには「テキストボックス」以外の別のツールを使用する必要がありますか?

どんな助けでも大歓迎です!!

グレッグ

4

2 に答える 2

0

jsFiddleにタイプミスが見つかりました。

私が最初にしたことは、追加することでした：

alert('hi there');

$(document).ready()ラッパー内のスクリプトの一番上に。jsFiddle では document.ready ラッパーが表示されないことに注意してください。これは目に見えないように含まれているため、私が行ったようにアラートを javascript ブロックの上部に配置するだけです (新しい jsFiddle へのリンクは回答の下部にあります)。

次に、ID で個別に参照することにより、複数のコントロールを有効/無効にしていることに気付きました。複数のコントロールが同じクラスを共有していれば、一度に複数のコントロールを参照できるので、私は を考案し、class="orderentry"それらの各コントロールにその属性を追加しました。これにより、8 行のコードが削除され、トラブルシューティングが容易になりました。

次に、削除/削除取り消しを開始しました。まず、javascript パネルで を除くすべてを削除alert('hi there');し、jsFiddle を実行しました。アラートがポップアップしました。偉大な。そのため、Ctrl+z を使用してすべてを元に戻しました。次に、次のコード ブロックを除くすべてを選択し、選択を削除しました。jsFiddle を実行すると、再びアラートが表示されました。

アラートが機能しなくなった場所がわかるまで、削除/削除の取り消しを続けました。これにより、問題のコードブロックが明らかになりました。その特定の領域の構文を注意深く調べなければならなかっただけで、エラーが見つかりました：

$('#txtOrder').attr({'disabled':'disabled')};  <== ERROR: note final parentheses

それ以外の

$('#txtOrder').attr({'disabled':'disabled'});  <== CORRECT: note final parentheses

これが役に立てば幸いです。プロジェクトの残りの部分で頑張ってください。

これが修正されたjsFiddleです

于 2013-09-11T17:27:08.583 に答える