Keskustelu: Nettisivujen teko: td#tahdet puoliksi eri värillä? (html, JS)

Onko mahdollista saada javascriptistä haetun id atribuutin arvoa kaksiväriseksi.

Eli tässä tämä samavanha koodi:

Javascript:

function annatahdet(luku){
   var merkkijono ="";
   for(i =0;i<luku;i++){
      merkkijono = merkkijono + "+ ";
   }
   return merkkijono;
}

...
document.getElementById('tahdet').innerHTML = annatahdet(3);

HTML

...
<style type ="text/css">
#tahdet{color:blä, blä...plala}
</style>
...
...
<td>tässä on tähdet: </td>
<td id = "tahdet">
...

Ja kun käytän tätä rakennetta, niin saan tosin määriteltyä tuossa CSS:ssa niille tähdille värin, esimerkiksi keltainen, mutta mitä mun pitäisi tehdä lisäksi tai pikemminkin; onko ylipäätänsä mahdollista tehdä siten, että kaikki puuttuvat tähden näkyisivät harmaana, eli tyyliin 3 keltaista tähteä ja kaksi harmaata, tai esim. yksi keltainen ja neljä harmaata?

Ainakin niin onnistuu, että lisäät tähden sijaan "tähtielementin", tyyliin <span class='star'>+</span> ja sitten muokkaat tuota class-attribuuttia sen mukaan, onko tähti puuttuva vai ei.

Tai no joo, pystynkö määrittämään scriptissä väriarvoja teksteille?
Onnistuishan se parhaiten silläin, että voisin määritellä sitä atribuutin väriä scriptissä. Onko se mahdollista?

Ku silloin voisin tehdä kaksi atribuuttia, keltaiset värit ja harmaat värit, sitten iskisin ne atribuutit vain peräikkäin tuolla span classilla, eiks jee?

Voit vaikka antaa tuolle funktiolle lisäksi parametrin, joka kertoo, halutaanko "puuttuvia" tähtiä.

function annatahdet(luku, puuttuva) {
    var luokka = puuttuva ? "tahti_puuttuva" : "tahti";
    var merkkijono = '<span class="' + luokka + '">';
    for (i = 0; i < luku; i++) {
        merkkijono += '+ ';
    }
    return merkkijono + '</span>';
}

...
document.getElementById('tahdet').innerHTML = annatahdet(3, false) + annatahdet(2, true);

Ja värit määritellään CSS:llä:

.tahti { color: yellow; }
.tahti_puuttuva { color: gray; }

Tähtien yhteismäärä on varmaankin vakio, joten ei tuohon toista parametria tartte.

Ai joo, katohan funktio, tää on fiksu ratkaisu. Kiitokset!

Miten muuten toi heittomerkkimentaliteetti toimii javascriptissä.
Milloin käytät merkkiä " ja merkkiä '?

Pikaisella haulla ei vaikuttais siltä, että JS tekee mitään konkreettista eroa heittomerkkien ja lainausmerkkien välillä - toimivat samoin, mutta kummallakaan ei voi sulkea toista, josta syystä onkin kätevä käyttää esim. attribuutteja tulostellessa kun ei tarvitse escapettaa.

EDIT: Hjoo, ee mittää. Tarkemmin miettii niin sama olla noin, olisin itekin loppupeleissä tehny useemman parametrin ratkaisun, ja uudelleenkäytettävyys on toki pop.

Piti nyt sitten miettiä, että mitenkä ite toteuttaisin, tekisin näköjään viiden parametrin funktion ;E.

function stars(chr, amount, limit, styles, pass) {
  var str = '<span class="' + styles[pass] + '">';
  var i = 0;
  while (i++ < amount) {
    str += chr;
  }
  str += '</span>';
  if (pass === 0) {
    str += stars(chr, limit - amount, limit, styles, 1)
  }
  return str;
}

// käytettävä merkki, määrä, yhteismäärä, Taulukko(eka tyyli, toka tyyli), kiekko
stars ( '+ ', 3, 5, new Array( 'star_on', 'star_off' ), 0 )

Niin niin, ihmettelin itekki, että ku näyttää toimivan lähes kummin vaan.

Mutta nyt ku sain tietää, että noita html tageja voi noin vaan piilottaa tuonne javascript merkkijono muuttujiin, niin väänsin tarkoitukseen sopivan funktion teidän antamien funtioden perusteella:

function annaMerkit(luku, merkki, muotoilu1, muotoilu2){
   //palauttaa merkkijonon, jossa on "luku":n verran merkkejä
   // muotoilulla <span class = "(muotoilu1)"> ja
   //10 - luvun verran merkkejä muotoilulla <span class = "(muotoilu2)">.
   //muotoilut pitää määritellä pitää määritellä HTML:ssä.
								//muotoilu1 ja muotoilu2 ovat tyyppiä merkkijono.

var merkit = "";
var merkitlaittamatta = ""; //merkitlaittamatta kertoo kuin monta puuttuu, esim kymmenestä tähdestä neljä on keltaista ja loput puuttuu.

for(i =0;i<luku;i++){
	merkit = merkit + merkki;
}
for(i =0;i<(10-luku);i++){		//vakio 10 tulee siitä, että 10 on mm. maksimitähtimäärä.
	merkitlaittamatta = merkitlaittamatta + merkki;
}



var merkkijono = '<spam class = "' + muotoilu1 + '">';
//muotoilulla 1 muotoillut merkit
merkkijono = merkkijono + merkit + '</span>';
merkkijono = merkkijono + '<spam class = "' + muotoilu2 + '">';
//muotoilulla 2 muotoilut merkit
merkkijono = merkkijono + merkitlaittamatta + '</span>';;
return merkkijono;

}

Mutta tässä oli se ongelmana, että Firefoxilla homma toimii ja tähdet ovat harmaita, mutta Explorerilla tämän "muotoilu2", ei näytä tehoavan ja kaikki tähden ovat keltaisia.
Onko tässä koodissa jotain scripti ohjelmointisääntöjen vastaista, vai miksiköhän Explorerilla homma ei toimi?

Haha, olet kirjoittanut spam. En nyt ehdi tarkemmin katsoa mutta varmaankin tuo on ongelmana.

Kiitti jälleen funktio! Kuinka ohjelmointi on ollut ylipäätänsä mahdollista ilman ohjelmointiputkaa :)