Autor Zpráva
leonek
Profil
Dobrý den.

Potřebuji pomoct se stránkou na kterou se mi z DB generují DIVy s informacemi. Chci aby se div po kliknutí na něj šedě podbarvil a pokud je podbarvený nějaký další tak aby se jeho podbarvení zrušilo. Zkrátka aby bylo podbarven jen ten div na který zrovna kliknu.

Chtěl jsem to udělat takto ale nefunguje to:
<div class=nejakydiv onClick="getElementsByClassName('nejakydiv').style.backgroundColor='#FFFFFF'; style.backgroundColor='#F5F5F5';">

Myslel jsem to tak aby se při kliknutí na jeden z divů všem nastavilo bílé pozadí a následně tomuto divu jiné.

Je to nesmysl nebo jen špatně zapsané?
IdemeNaHavaj
Profil
http://nuda.codebook.cz/

<div class="div1" id="div1" onClick="div2.style.backgroundColor='#F5F5F5';div1.style.backgroundColor='#FFFFFF';div3.style.backgroundColor='#F5F5F5'">
Div 1</div>
<div class="div2" id="div2" onClick="div1.style.backgroundColor='#F5F5F5';div2.style.backgroundColor='#FFFFFF';div3.style.backgroundColor='#F5F5F5'"">
Div 2</div>
<div class="div3" id="div3" onClick="div1.style.backgroundColor='#F5F5F5';div2.style.backgroundColor='#F5F5F5';div3.style.backgroundColor='#FFFFFF'"">
Div 3</div>
leonek
Profil
Ano, výsledek by měl fungovat jako je to ve vaší ukázce. Bohužel zaprvé nevím přesný počet výsledných divů a navíc je jich několik stovek nejméně.
Michal Maršálek
Profil
Dobrý den,
možností je více. Buď podle tvého nápadu, ale v tom případě musíš divy projet cyklem foreach nebo si prostě uložit, který div byl naposled změněn a změnit barvu jen u něj. Každopádně, barvu pozadí aktuálního divu nastavíš this.style.backgroundColor ne jen style.backgroundColor.
Chamurappi
Profil
Reaguji na leonka:
getElementsByClassName('nejakydiv')
To vrací kolekci elementů, ke kterým můžeš jednotlivě přistupovat přes indexy [0], [1] atd., navíc nefunguje v Exploreru 8.

Jsou ty <div>y v nějakém společném rodiči?
Má být nějaký z nich obarvený na začátku?
Je výsledek určený široké veřejnosti, nebo jen omezené cílové skupině, u níž jde zaručit přítomnost novějších prohlížečů?
Musí být nabarvení zachováno i po kliknutí na jiné prvky ve stránce?


Reaguji na Michala Maršálka:
musíš divy projet cyklem foreach
Obyčejným forem.

barvu pozadí aktuálního divu nastavíš this.style.backgroundColor ne jen style.backgroundColor
V příkazech zapsaných v atributu funguje automaticky with(this).
leonek
Profil
Reaguji na Chamurappiho:
Jsou ty <div>y v nějakém společném rodiči?
Rodičovský div není problém nastavit.

Má být nějaký z nich obarvený na začátku?
Ne

Je výsledek určený široké veřejnosti, nebo jen omezené cílové skupině, u níž jde zaručit přítomnost novějších prohlížečů?
Musí být nabarvení zachováno i po kliknutí na jiné prvky ve stránce?

Chci aby se to chovalo jakby (!) select ve formuláři. Tuto stránku připravuji pro použití na Tabletu s GoogleAndroidem a prohlížeč bude použit pravděpodobně Opera. Nevím jestli to tam bude vůbec fungovat, ale přinejhorším budou uživatelé PC (Výhradně Mozilla novější verze - naučil jsem si je na to :D) zvýhodněni o tuto funkci.

Je to redkační systém na míru tomuto podniku.
IdemeNaHavaj
Profil
http://nuda.codebook.cz/

<script>
function zmenFarby(element)  
{  
links=document.getElementsByTagName("div");  
for (var i = 0 ; i < links.length ; i ++){
links.item(i).style.backgroundColor='#F5F5F5';  
element.style.backgroundColor='#FFFFFF'; 
}
} 
</script>

<?php
for ($i = 1; $i <= 500; $i++) {  //500 je pocet tvojich divov
?>
<div name="div" class="div" id="<?=$i?>" onClick="zmenFarby(this);">
Div <?=$i?></div>

<?php
}
?>
leonek
Profil
Tak jsem ustoupil od toho aby se ten původně obarvený div odbarvil sám protože mi to přijde moc složité na to, že je to jen pomůcka pro "slepejše" a vymyslel jsem toto, ale asi jsem to zase špatně napsal...

<script>
function zabarvidiv(div){
    backdiv = div.style.backgroundColor;

if(backdiv == \"#FFFFFF\" OR backdiv == \"\"){
  div.style.backgroundColor='#F5F5F5';
}
else{
  div.style.backgroundColor='#FFFFFF';
}

  }
</script>

...

<div class=nejakydiv onClick=\"zabarvidiv(this);\">
Chamurappi
Profil
Reaguji na leonka:
Kdyby nemuselo být nabarvení zachováno při ťuknutí na něco jiného, šlo by dát <div>ům atribut tabindex s nějakým číslem a pak stylovat v CSS .nejakydiv:focus, fungovalo by to tedy úplně bez JavaScriptu.

Ale pokud to má být stejné jako přepínače ve formuláři, přidej společného rodiče, dej mu atribut onclick="nabarvi(this, event)" a přidej skript:
<script>
var naposledy;
function nabarvi(event)
{
  var target = event.target || event.srcElement;
  while(target && target.className != "nejakydiv") target = target.parentNode;
  if(!target) return;
  if(naposledy) naposledy.style.backgroundColor = "";
  target.style.backgroundColor = "#F5F5F5";
  naposledy = target;
}
</script>
Uvedený skript jsem nezkoušel. Nebude-li ti fungovat, prosím o odkaz na živou ukázku.

vymyslel jsem toto, ale asi jsem to zase špatně napsal
V JavaScriptu se OR píše jako dvě svislítka.


Reaguji na IdemeNaHavaje:
Doufám, že na té adrese zůstane ten příklad funkční na věky věků… protože jinak je taková odpověď z dlouhodobého hlediska skoro bezcenná.
Camo
Profil
leonek:
"od toho aby se ten původně obarvený div odbarvil sám protože mi to přijde moc složité"
No tak to je bieda...
Stačí si uložiť ten predošlý div do nejakej globálnej premennej a v tej funkcii ho odfarbíš. Ten cyklus od IdemeNaHavaj mi príde dosť predimenzovaný.
lastDiv="";

function changeBG(elem){
elem.style.backgroundColor = "red";
lastDiv.style.backgroundColor = lastDiv==elem ? "red" : "white";
lastDiv=elem;
}
OPRAVA:
var lastDiv="";

function changeBG(elem){
     elem.style.backgroundColor = "red";
    if(lastDiv != ""){
        lastDiv.style.backgroundColor="white";
    }
    lastDiv=elem;
}
OPRAVA2:
var lastDiv;

function kchangeBG(elem){
    if(lastDiv){
        lastDiv.style.backgroundColor="white";
    }
     elem.style.backgroundColor = "red";
     lastDiv=elem;
}
leonek
Profil
Camo:
Perfektní řešení, děkuji a smekám... :-)

EDIT: Vím že je to jednoduché, ale na tohle musí být člověk geniální aby vymslel něco tak prostého... :D

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: