javascript - jqueryを使って結果を最後に入れる方法

Question

私のコードは次のとおりです。セクションにjsを含むhtmlです。ch3eckしてください。5つの質問のフォームの結果を生成し、ページの最後のセクションに表示する必要があります。最後のセクションで

<div id="section1">
    <script type="text/javascript">
        function changeText2() {
            alert("working");
            var count1 = 0;
            var a = document.forms["myForm"]["drop1"].value;

            var b = document.forms["myForm"]["drop2"].value;
            alert(document.forms["myForm"]["drop2"].value);

            var c = document.forms["myForm"]["drop3"].value;
            var d = document.forms["myForm"]["drop4"].value;
            var e = document.forms["myForm"]["drop5"].value;
            var f = document.forms["myForm"]["drop6"].value;

            if (a === 2) {
                count1++;
                alert(count1);
            } else {
                alert("lit");
            }

            if (b === 2) {
                count1++;
            } else {
                alert("lit");
            }

            if (c === 2) {
                count1++;
            } else {
                alert("lit");
            }

            if (d === 2) {
                count1++;
            } else {
                alert("lit");
            }

            if (e === 2) {
                count1++;
            } else 
                alert("lit");
        }
        alert(count1);


        document.getElementById('boldStuff2').innerHTML = count1;
    </script>

    <form name="myForm">
        <p>1)&#x00A0;&#x00A0;Who won the 1993 &#x201C;King of the Ring&#x201D;?</p>
        <div>
            <select id="f1" name="drop1">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Owen Hart</option>
                <option value="2">Bret Hart</option>
                <option value="3">Edge</option>
                <option value="4">Mabel</option>
            </select>
        </div>
        <!--que1-->
        <p>2)&#x00A0;&#x00A0;What NHL goaltender has the most career wins?</p>
        <div>
            <select id="f2" name="drop2">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Grant Fuhr</option>
                <option value="2">Patrick Roy</option>
                <option value="3">Chris Osgood</option>
                <option value="4">Mike Vernon</option>
            </select>
        </div>
        <!--que2-->
        <p>3)&#x00A0;&#x00A0;What Major League Baseball player holds the record for
            all-time career high batting average?</p>
        <div>
            <select id="f3" name="drop3">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Ty Cobb</option>
                <option value="2">Larry Walker</option>
                <option value="3">Jeff Bagwell</option>
                <option value="4">Frank Thomas</option>
            </select>
        </div>
        <!--que3-->
        <p>4)&#x00A0;&#x00A0;Who among the following is NOT associated with billiards
            in India?</p>
        <div>
            <select id="f4" name="drop4">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Subash Agrawal</option>
                <option value="2">Ashok Shandilya</option>
                <option value="3">Manoj Kothari</option>
                <option value="4">Mihir Sen</option>
            </select>
        </div>
        <!--que4-->
        <p>5)&#x00A0;&#x00A0;Which cricketer died on the field in Bangladesh while
            playing for Abahani Club?</p>
        <div>
            <select id="f5" name="drop5">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Subhash Gupte</option>
                <option value="2">M.L.Jaisimha</option>
                <option value="3">Lala Amarnath</option>
                <option value="4">Raman Lamba</option>
            </select>
        </div>
        <!--que5--> <a href="#services" class="page_nav_btn next"><input type='button' onclick='changeText2()' value='NEXT'/></a>

    </form>
</div>
<div id="section2"></div>...
<div id="results">
    <b id='boldStuff2'>fff ggg</b> 
</div>

スクリプトに示されているように、最後の div で各セクションの結果を表示する必要があります...
最初のセクションの js が機能していません plz どこが間違っているのか助けてください....

score 2 · Accepted Answer

あなたの問題は、中括弧が間違った場所にあるようです。

関数の終了が早すぎた場合、「innerHTML」は関数の外にあります。適切なコードのインデントを使用することをお勧めします。これにより、これらのエラーがより早く表示されます。

コードを次のように変更します。

<script type="text/javascript">
    function changeText2() {
        alert("working");
        var count1 = 0;
        var a = document.forms["myForm"]["drop1"].value;

        var b = document.forms["myForm"]["drop2"].value;
        alert(document.forms["myForm"]["drop2"].value);

        var c = document.forms["myForm"]["drop3"].value;
        var d = document.forms["myForm"]["drop4"].value;
        var e = document.forms["myForm"]["drop5"].value;
        var f = document.forms["myForm"]["drop6"].value;

        if (a == 2) {
            count1++;
            alert(count1);
        } else {
            alert("lit");
        }

        if (b == 2) {
            count1++;
        } else {
            alert("lit");
        }

        if (c == 2) {
            count1++;
        } else {
            alert("lit");
        }

        if (d == 2) {
            count1++;
        } else {
            alert("lit");
        }

        if (e == 2) {
            count1++;
        } else 
            alert("lit");

        alert(count1);

        document.getElementById('boldStuff2').innerHTML = count1;
    }
</script>

==編集: and notも使用する必要があります===。===また、値の場合は「string」option、リテラルの場合は int であるオペランドのタイプも比較します。も使用でき===ますが、オプション値を数値ではなく文字列リテラルと比較する必要があります。e === "2"の代わりにe === 2。

上記のコードを編集しました。今はうまくいくようです。 http://jsfiddle.net/xzP8B/

score 0 · Accepted Answer

下部の更新され_{たヒントとデバッグ用の新しいコード}

あなたはまだjQueryを十分に理解していないようで、JavaScriptが最終的に何をすべきかはわかりません. これがあなたの助けになることを願っています。

<script type="text/javascript">
    function changeText2() {
        alert("working");
        
        var count1 = 0, //  just fyi, you could get all the following much easier if you used IDs instead, for instance:
            a = $('form[name="myForm"]').find('select[name=drop1]').val(),  //  $("#myForm") would retrieve <form id="myForm" ...
            b = $('form[name="myForm"]').find('select[name=drop2]').val(),
            c = $('form[name="myForm"]').find('select[name=drop3]').val(),
            d = $('form[name="myForm"]').find('select[name=drop4]').val(),
            e = $('form[name="myForm"]').find('select[name=drop5]').val(),
            f = $('form[name="myForm"]').find('select[name=drop6]').val();
        
        //  First error test here
        console.log(a, b, c, d, e, f);  //  also, you dont have to use alert to test things, try opening your browsers console
        
        //  really not sure what you had going with all the if statements, but they all produce the same result, well, here ...
        (a == 2 || b == 2 || c == 2 || d == 2 || e == 2 || f == 2) ? count1++ : alert("lit");
            
        //  Final Test in console what just happened
        console.log("A-F Equaled 2: ", (a == 2 || b == 2 || c == 2 || d == 2 || e == 2 || f == 2));
        console.log("count1: ", count1);

        
        alert(count1);
        
        $("#boldStuff2").text(count1);
    };
    
    //  The previous is just a function and not applied to anything
    //  which i noticed in your code may be a large part of your problem
    //  The following is the "document.ready function (if you're using a newer jQuery version you can shorten it, but thats another lesson)
    //  This tells the html, when the page loads, attempt this
    $(document).ready(function() {
        //  the following grabs the element named "myForms" and tells it, onSubmit, do what's inside
        $('form[name="myForm"]').submit(function(e) {
            e.preventDefault(); //  this command stops the form from submitting under normal browser rules
            changeText2();  //   this calls our predefined function
        });
    })
</script>

追加情報

また、ボタンの html は、私が提供した jQuery/JavaScript を使用して変更できます。私のjQueryコードにはフォーム送信を処理する機能があるため、入力ボタンは通常のフォーム送信ボタンにすることができます

変化する：

<input type='button' onclick='changeText2()' value='NEXT'/>

に：

<input type="submit" value="NEXT">

どちらの方法も間違っているわけではありません。必要に応じて onclick ボタンを使用できますが、.submit コードは必要ありません。心に留めておくべきことがあります。

ヒント

ALERT よりも CONSOLE を使用してデバッグする方がはるかに簡単です。異なるブラウザーでコンソールを表示するには、それぞれのプロセスが異なります。以下では、上位 3 つの主要なブラウザーでコンソールにアクセスする方法を説明します。

IE7+
- 「F12」キーを 1 回押すだけ
です - 次に、「コンソール」というテキストがある「タブ」をクリックします (左から 3 番目)。

FireFox
- 最も簡単な方法は、FireBug
をインストールすることです。インストールしたら、ブラウザの右上にある小さな「バグ」をクリックするだけです。
「コンソール」タブをクリックしてアクティブにします。

Google Chrome
- 「Ctrl+Shift+J」を押すだけです
- ヒントとして、このショートカットキーを押すときは、Chrome ブラウザにウィンドウフォーカスがあることを確認してください
- また、「コンソール」タブをクリックすると、すべてのコンソール結果が表示されます。

ブラウザーのコンソールを使用することは、JavaScript をデバッグするための優れた方法であるだけでなく、ファイルの読み込み中のエラーを通知したり、クロスドメインの問題などに関する潜在的な警告にフラグを立てたりすることもできます!

javascript - jqueryを使って結果を最後に入れる方法

2 に答える 2

Related

Reference