0
クリスマスカレンダーサイトを作成しようとしてエラーが発生しました。 私は基本的に毎日がボタンであるクリスマスカレンダーを書いた。次に、これらのボタンをすべてランダムにランダムにシャッフルして、クリックしようとしている日を積極的に探していきたいと思っていました。配列からhtml要素を作成中にJavascriptエラーが発生する
これは正常に動作しますが、右側のボタンがまったく作成されないことがあるを除き、これは非常にうまく動作します。時にはそれも複数のボタンです。なぜこれが起こっているのか正直に分かりません。 20回ごとに1回のみ試行されます。したがって、このエラーを試してみるまで、エラーが表示されるまで何度も試してみてください。あなたは、ボタンがなければならないが、まったく作成されていない右側のギャップを見つけることができます。
提供されているアイデアやヘルプには非常に感謝しています。 あまりにも多くの皆さん、事前にありがとうございます。
var alleCols = $('.col');
var alleRows = $('.row');
// Die rows leeren
alleRows.empty();
//durch alle cols gehen
var length = alleCols.length;
for(var i = 0; i < length; i++){
// 24(länge die am anfang vorhanden ist) mal durch das array gehen
do{
//einen zufälligen rowindex holen
var rowindex = Math.floor(Math.random()*alleRows.length);
//den row mit dem zufällig generierten index ziehen
var randomrow = alleRows.get(rowindex);
//falls diese row noch weniger als 6 elemente in sich hat
if(randomrow.childElementCount < 6){
//zufälligen colindex holen
var colindex = Math.floor(Math.random()*alleCols.length);
//zufällig generierten col ziehen und an die row anhängen
alleRows.get(rowindex).appendChild(alleCols.get(colindex));
//zufällig generierten col aus dem array kicken
alleCols.splice($.inArray(alleCols.get(colindex), alleCols), 1);
}
//wiederholen bis man ein randomrow gefunden hat das noch keine 6 elemente in sich hat
}while(randomrow.childElementCount < 6)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col s2">
<button id="eins" class="text">
EINS
</button>
</div>
<div class="col s2">
<button id="zwei">
2
</button>
</div>
<div class="col s2">
<button id="drei">
3
</button>
</div>
<div class="col s2">
<button id="vier" class="text">
VIER
</button>
</div>
<div class="col s2">
<button id="fuenf">
5
</button>
</div>
<div class="col s2">
<button id="sechs">
6
</button>
</div>
</div>
<div class="row">
<div class="col s2">
<button id="sieben" class="text">
SIEBEN
</button>
</div>
<div class="col s2">
<button id="acht">
8
</button>
</div>
<div class="col s2">
<button id="neun">
9
</button>
</div>
<div class="col s2">
<button id="zehn" class="text">
ZEHN
</button>
</div>
<div class="col s2">
<button id="elf">
11
</button>
</div>
<div class="col s2">
<button id="zwoelf" class="text">
ZWÖLF
</button>
</div>
</div>
<div class="row">
<div class="col s2">
<button id="dreizehn">
13
</button>
</div>
<div class="col s2">
<button id="vierzehn" class="text">
VIERZEHN
</button>
</div>
<div class="col s2">
<button id="fuenfzehn" class="text">
FÜNFZEHN
</button>
</div>
<div class="col s2">
<button id="sechszehn">
16
</button>
</div>
<div class="col s2">
<button id="siebzehn" class="text">
SIEBZEHN
</button>
</div>
<div class="col s2">
<button id="achtzehn">
18
</button>
</div>
</div>
<div class="row">
<div class="col s2">
<button id="neunzehn" class="text">
NEUNZEHN
</button>
</div>
<div class="col s2">
<button id="zwanzig" class="text">
ZWANZIG
</button>
</div>
<div class="col s2">
<button id="einundzwanding">
21
</button>
</div>
<div class="col s2">
<button id="zweiundzwanzig">
22
</button>
</div>
<div class="col s2">
<button id="dreiundzwanzig">
23
</button>
</div>
<div class="col s2">
<button id="vierundzwanzig" class="text">
VIERUNDZWANZIG
</button>
</div>
</div>
</div>
、ありがとうございました！ :) – MariusMeiners