javascript - なぜこれがループしないのですか？取得 - TypeError: document.getElementById(...) が null

Question

私はまだ JavaScript を学んでいるので、完全なアドバイスをいつでも歓迎します。宝くじシミュレーターを作成していますが、すべてうまく機能していますが..... 関数をクリックして実行すると、乱数が生成され、比較が行われますが、関数をループしようとすると、取得する - TypeError: document.getElementById （...）無効です。

私はいくつかのことを試しましたが、これで完全に頭を悩ませていると思います.

問題のコードは.

 var automateLottery = function(){
    numberOfWeeks = numberOfWeeks + 1;//tally up rounds
    //drawUniqueNumbers();

var p_01 = parseInt(document.getElementById("picked_number_01").value);
var p_02 = parseInt(document.getElementById("picked_number_02").value);
var p_03 = parseInt(document.getElementById("picked_number_03").value);
var p_04 = parseInt(document.getElementById("picked_number_04").value);
var p_05 = parseInt(document.getElementById("picked_number_05").value);
var p_06 = parseInt(document.getElementById("picked_number_06").value);

var r_01 = parseInt(document.getElementById("random_01").value);
var r_02 = parseInt(document.getElementById("random_02").value);
var r_03 = parseInt(document.getElementById("random_03").value);
var r_04 = parseInt(document.getElementById("random_04").value);
var r_05 = parseInt(document.getElementById("random_05").value);
var r_06 = parseInt(document.getElementById("random_06").value);


if(p_01===r_01||p_01===r_02||p_01===r_03||p_01===r_04||p_01===r_05||p_01=== r_06){
        document.getElementById("compare_01").value = ("You have matched number " + " " +p_01 );
        addUpMatches(1);
    }else{
        document.getElementById("compare_01").value = ("No matches" )
    };

if(p_02===r_01||p_02===r_02||p_02===r_03||p_02===r_04||p_02===r_05||p_02===r_06){
        document.getElementById("compare_02").value = ("You have matched number" + " " +p_02 );
        addUpMatches(1);
    }else{
        document.getElementById("compare_02").value = ("No matches" )
    };      

if(p_03===r_01||p_03===r_02||p_03===r_03||p_03===r_04||p_03===r_05||p_03===r_06){
        document.getElementById("compare_03").value = ("You have matched number" + " " +p_03 );
        addUpMatches(1);
    }else{
        document.getElementById("compare_03").value = ("No matches" )
    };

if(p_04===r_01||p_04===r_02||p_04===r_03||p_04===r_04||p_04===r_05||p_04===r_06){
        document.getElementById("compare_04").value = ("You have matched number" + " " +p_04 );
        addUpMatches(1);
    }else{
        document.getElementById("compare_04").value = ("No matches" )
    };

if(p_05===r_01||p_05===r_02||p_05===r_03||p_05===r_04||p_05===r_05||p_05===r_06){
        document.getElementById("compare_05").value = ("You have matched number" + " " +p_05);
        addUpMatches(1);
    }else{
        document.getElementById("compare_05").value = ("No matches" )
    };

if(p_06===r_01||p_06===r_02||p_06===r_03||p_06===r_04||p_06===r_05||p_06===r_06){
        document.getElementById("compare_06").value = ("You have matched number" + " " +p_06 );
        addUpMatches(1);
    }else{
        document.getElementById("compare_06").value = ("No matches" )
    };



declareMatches();//----Add up per round and total
    document.getElementById("amountOfMatched").value = ("You have matched" + " " +totalMatchedThisRound + " "+ "numbers"); 
    document.getElementById("weeks").value = ("You have played for" + " " +numberOfWeeks + " "+ "and have won £"+ totalWinnings );
    document.getElementById("amountOfThreeMatches").value = ("You have so far had" + " " +match3 + " "+ "matches of three"  );
    document.getElementById("amountOffourMatches").value = ("You have so far had" + " " +match4 + " "+ "matches of four"  );
    document.getElementById("amountOffiveMatches").value = ("You have so far had" + " " +match5 + " "+ "matches of five"  );
    document.getElementById("amountOfsixMatches").value = ("You have so far had" + " " +match6 + " "+ "matches of six"  );

    clearCount();//clears amount matched every round
    cleartempTotal();//clears total matched every round

 };

 for( var i = 0; i < 10 ; i++){
    automateLottery();
 };

HTML:

<div id="random_numbers">
<FORM NAME="random_numbs" ACTION="" METHOD="GET">

    <INPUT TYPE="text" class="ran_numb" id="random_01" NAME="slot_01" VALUE="">
    <INPUT TYPE="text" class="ran_numb" id="random_02" NAME="slot_02" VALUE="">
    <INPUT TYPE="text" class="ran_numb" id="random_03" NAME="slot_03" VALUE="">
    <INPUT TYPE="text" class="ran_numb" id="random_04" NAME="slot_04" VALUE="">
    <INPUT TYPE="text" class="ran_numb" id="random_05" NAME="slot_05" VALUE="">
    <INPUT TYPE="text" class="ran_numb" id="random_06" NAME="slot_06" VALUE="">
    <br/><br/>
    <INPUT TYPE="button" NAME="button2" Value="Draw Numbers"      onClick="drawUniqueNumbers()">
</FORM>

 <div id="matched_numbers">
<FORM NAME="myform" ACTION="" METHOD="GET">

    <INPUT TYPE="text"  NAME="matched_01" id="compare_01" VALUE=""><br>
    <INPUT TYPE="text"  NAME="matched_02" id="compare_02" VALUE=""><br>
    <INPUT TYPE="text"  NAME="matched_03" id="compare_03" VALUE=""><br>
    <INPUT TYPE="text"  NAME="matched_04" id="compare_04" VALUE=""><br>
    <INPUT TYPE="text"  NAME="matched_05" id="compare_05" VALUE=""><br>
    <INPUT TYPE="text"  NAME="matched_06" id="compare_06" VALUE=""><br>
    <br/>
    <INPUT TYPE="text"  NAME="numbers3" id="amountOfMatched" VALUE="You have matched 0 numbers"><br>
    <br>

    <INPUT TYPE="text"  NAME="numbers4" id="amountOfThreeMatches" VALUE=""><br>
    <INPUT TYPE="text"  NAME="numbers5" id="amountOffourMatches" VALUE=""><br>
    <INPUT TYPE="text"  NAME="numbers6" id="amountOffiveMatches" VALUE=""><br>
    <INPUT TYPE="text"  NAME="numbers6" id="amountOfsixMatches" VALUE=""><br>
    Stats<br>
    <INPUT TYPE="text"  NAME="weeks"  id="weeks" VALUE=""><br>
</FORM>

htmlの一部です。

フォームと変数に値が入っていることを確認するだけです。正常に機能する「automateLottery」機能をトリガーするボタンを設定しました。生成された乱数を取得し、それらを選択した数値と比較してから、統計をコンパイルします。問題は、automoteLottery をループでセットアップすると機能しないことです。

すべてのコードをここに配置する必要がありますか? それともこれで十分ですか？

再度、感謝します

助けていただける方、よろしくお願いします。

score 0 · Accepted Answer

まず、null 例外は、空のまたは存在しない html 要素から発生している可能性があります。

次に、ループを使用して、一致するすべてのステートメントを処理します。

例えば：

for (var i = 1; i = <6; i++)
{
    var variable = parseInt(document.getElementById("picked_number_" + i).value);
    if (variable == Math.floor((Math.random()*100)+1))
    {
        alert("You've won!");
    }
}

この場合、ID「picked_number_」とループで使用される変数番号を持ついくつかの正しい html 要素のみが必要です。(var i) あなたの乱数は if ステートメントで生成され、それが一致する場合、あなたは勝ちました:D

ところで、このスクリプトは 1 から 100 までの乱数を使用しています。

これが少し役立つことを願っています。

javascript - なぜこれがループしないのですか？取得 - TypeError: document.getElementById(...) が null

1 に答える 1

Related

Reference