2

JavaScript、HTML、および CSS で簡単な Web ページを作成しようとしています。Web ページは 5 つの div 要素を生成します。各 div 要素には、乱数、テキスト入力、送信ボタンが含まれます。以下の私のコードはそれを行います。

ユーザーは乱数をテキスト入力ボックスに入力し、送信ボタンをクリックできるはずです。スクリプトは、正しい答えを入力したかどうかを確認する必要があります。

これが可能かどうかわかりませんか？ページ上の 1 つのフォームだけのコードを記述する方法は理解していますが、この例では、動的に生成される 1 つのページで 5 つのフォームを使用しています。どんな助けでも大歓迎です。

    <html>
    <head>

    <style type="text/css">
       #test {
           width:250px;
            padding:10px;
            border:5px solid gray;
            margin:10px;

        }
     </style>

    </head>

    <body>
    <script>

    for (i = 0; i < 5; i++) {

        document.write('<div id="test">');
        var ranNum = Math.floor(Math.random()*10);
        document.write(ranNum);
        document.write("<p>Enter the number above:</p>");
        document.write("<form id=\"form1\" name=\"form1\" method=\"post\" action=\"\"><input type=\"text\" name=\"answer\" id=\"answer\" /><input type=\"submit\" name=\"button\" id=\"button\" value=\"Submit\" /></form>");
        document.write('</div>');
    }

    </script>
    </body>
    </html>
4

2 に答える 2

1

サーバーと対話して、それが正しい答えであるかどうかを確認することさえしません。ですから、はい、簡単にできます。jqueryを使用して、これらの数値プロパティをグローバルオブジェクトにし#idます。これは、入力にちなんで名付けられたプロパティです。ユーザーがクリックすると、入力の値と同じ名前のグローバルオブジェクトのプロパティを比較するだけです。

例えば：

window.myObject = {}

myObject.div1 = // your code for random number
myObject.div2 = // again, code for random number

などなど、乱数コードを関数に入れ、各プロパティに対して呼び出します。

次に、div 値をプロパティとして設定します。

$("div.div1").append("<span class='value'>" + myObject.div1 + "</span>");

または、それを行うためのループを作成して、すべての div に対して入力する必要がないようにすることもできます。

その後、入力をテストします。

$("div.div1").find("submit").click(function(){
    // here you collect the data from your form, lazy to type
    // and test it for equality with coresponding myObject.div1 
    // or with the value in <span class="value>
    //e.g.
    if ($(this).parent().find(".mytextinput").val() == $(this).parent().find("span.value").val())
        { //do something} else {//do something else }
});

もちろん、これは jquery を使用できることを前提としています。

于 2012-11-15T02:11:34.593 に答える
0

コメントで指摘されているように、ID が常に一意であることを確認してください。この単純なことにはajaxを使用しません。クライアント側で値を確認できます。実用的なソリューションについては、以下を参照してください。

for (i = 0; i < 5; i++) {
    document.write('<div id="div-' + i + '">');
    var ranNum = Math.floor(Math.random()*10);
    document.write(ranNum);
    document.write("<p>Enter the number above:</p>");
    document.write("<form id=\"form-" + i + "\" name=\"form-" + i + "\"><input type=\"text\" name=\"answer\" id=\"answer-" + i + "\" /><input type=\"submit\" name=\"button\" id=\"button-" + i + "\" value=\"Submit\" onclick=\"checkAnswer(this); return false;\"/></form>");
    document.write('</div>');
}
function checkAnswer(element) {
    var thisAnswer=element.form.parentElement.textContent.substring(0,1);
    var answerGiven=element.form.children[0].value;
    if (thisAnswer==answerGiven) {
        alert("correct!");
    } else {
        alert("wrong!");
    }
}
于 2012-11-15T02:16:17.960 に答える