Přidání css stylu číslům ze scriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj, potřeboval bych poradit a nemůžu se nikde dohledat, jak vygenerovaným číslum přiřadit obrázek na pozadí, každému číslu zvlášť. 

A jeste kdyby jste prosim objasnili, co dané časti kodu dělají, tam kde jsem dal , že nerozumím.

.js kod:

HTML:

<p onclick="myFunction()">sem klikni

<p id=demo>  

Javascript:

function myFunction() { var arr = [];

while(arr.length < 2)     {     var randomnumber=Math.ceil(Math.random()*5)      var found=false;                                                                     // .. ? proc prosim false     for(var i=0;i<arr.length;i++)         {                                         // .., ? zde se podminkou opět prochází pole?        if(arr[i]==randomnumber) {                                                     //...?  co prosim znamena tento odstavec, co ma za ukol            

      found=true;            

       break;            

        }         

    if(!found)arr[arr.length]=randomnumber; {                             //...?  tomuto nerozumim    

   document.getElementById("demo").innerHTML = arr;            //...? co vypise toto?

  document.getElementById("demo").style.backgroundImage = url("images/kruh.png"); //nejak takto pridat obrazek kazdemu cislu

}
 

Domaci ukol do skoly? :) Nespis jsi ve skole spal. Nejspis jsi o prikladu ani nepremyslel.

Ten kod ma naplnit pole nahodnymi cisly tak, aby se neopakovali. (takhle to muze napsat jen nouma, protoze by se mu to mohlo zacyklit do nekonecne smycky, takze to nejspis psal nejaky ucitel a za ukol jsi dostal to upravit; navic vyuzil funkci math.ceil).
Kdyz mas naplnit pole nahodnymi cisly, tak je to jednoduchy cyklus . (pokracuj zdrojovym kodem 1, forko mi to cele nejak zprehazelo pri psani a neda se to jednoduse kopirovat)

2)

var pole, i, nalezeno, cislo, prvku, max_random;
pole = [];        // vytvorim prazdne pole
prvku = 2;        // chci 2 cisla (count)
max_random = 5;   // chci aby max cislo bylo (max)

while(pole.length < prvku) // cili, cyklus bude probihat, dokud delka
    // pole bude mensi nez 2 prvky
  {
  cislo = Math.ceil(Math.random() * max_cislo) // vyber nahodne cislo
    // ceil(3) = 3; ceil(3.0001) = 4; ceil(3.9999) = 4
    // takze nahodnych cisel bude >0, coz je ale spatne, proto jsem
    // pouzil floor a max pridal +1
  // mas nahodne cislo a ted potrebujes projit cele pole a zjistit, zda v 
  // nem takove cislo je ci neni. Takze si nejdriv nastavis, ze jsi cislo
  // nenasel a prohledavas. Kdyz ho najdes, nastavis nalezeno = true. Kdyz
  // ne, zustane nalezeno = false
  nalezeno = false;                                                                     
  for(i=0;i<pole.length;i++)
    {
    if(pole[i]==cislo)
      {
      nalezeno = true;            
      break; // prerus cyklus
      }
    } // tady asi nemas zavorku!
  if(nalezeno==false)
    {
    pole[pole.length] = cislo;
    }
  } // a cele to opakuj dokud pocet cisel v poli je 2 (pole.length < prvku)

1)

var i, max, arr, count;
max = 5 + 1;count = 2;
arr   = [];
for(i=0;i<count;i++)
  {
  arr[arr.length] = Math.floor(Math.random() * max);
  // Math.random vraci cislo 0 az 0.9999
  // lze pouzit arr[arr.length] nebo arr[i]
  }

Kdyz si to rozepises, tak to presne dela
max   = 5
count = 2
arr   = nove prazdne pole
---
i = 0
podminka 0<2 (i<count) plati
Math.random() = napr 0,14976
Math.random() * 5 = 0,7488
Math.floor(Math.random() * max) = Math.floor(0,7488) = 0 // floor oreze vse za desetinnou carkou
arr.length = 0
arr[0] = 0 // vysledne pole [0]
---
i++ => i = 1
podminka 1<2 plati
Math.random() = napr 0.65
Math.random() * 5 = 3.25
Math.floor(3.25) = 3
arr.length = 1 // protoze v predchozim kroku jsme do nulte pozice ukladali cislo 0, takze delka pole je ted 1 prvek
arr[1] = 3 // vysledne pole [0, 3]
---
i++ => i = 2
podminka 2<2 neplati, konec cyklu

vysledne pole [0, 3]

Dobre, ale ty tam ted potrebujes cisla tak, aby se neopakovala. Logicky bys postupoval tak, ze do pole priradis cisla 0 az n, zamichas a vyberes prvnich x cisel. Coz je ale narocne na pamet. Pokud ji nemas, tak by sel pouzit i ten uciteluv postup s rizikem, ze to muze treba pocitat 10 let :)
Ok, takze ucitel pouzil postup takovy, ze vybere nahodne cislo. Toto cislo hleda v poli a pokud ho najde, vybere nove nahodne cislo. Pokud nenajde, prida jej do pole.
(pokracuj zdrojovym kodem 2)

(za kodem 2)

document.getElementById("demo").innerHTML = arr;            //...? co vypise toto?
To vypise 'array'. Proc? Protoze pole je pole a nelze ho hned priradit tagu. By tam muselo byt join, alespon. Nebo vypsat konkretni prvek
 = arr; // vypise 'array', proste nesmysl
 = arr.join(', '); // vypise 0, 3
 = arr.join('XXX'); // vypise 0XXX3
 = arr[1]; // vypise 3

document.getElementById("demo").style.backgroundImage = url("images/kruh.png");
// proste nesmysl, nevim, kdes na to prisel; To se da pouzit pro jiny priklad
var obj;
obj = document.getElementById("demo"); // <div id=demo></div>
obj.innerHTML = arr[1]; // vypise 3 (viz predchozi vysvetleni)
obj.innerHTML = '<span>' + arr[1] + '<\/span>'; // vypise <span>3</span>
A k tomu uz neni problem pridat pozadi, ne?

Jo, jeste by mozna stalo zminit pridavani. Predpokladam, ze += neznas

obj.innerHTML = ''; // smaze vse
obj.innerHTML += '<span>' + arr[1] + '<\/span>'; // prida <span>3</span>
obj.innerHTML += '<span>' + arr[0] + '<\/span>'; // prida <span>0</span>

obj.innerHTML += 'text' // je totez jako
obj.innerHTML = obj.innerHTML + 'text'
str += 'text'
str = str + 'text'
Pouzij, co se ti libi vic.