J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
Jag behöver släcka/tända ett lager, men det blir inte helt rätt, första gången man klickar fungerar inte.
Har felsökt med alert(), och det visar sig att objektet inte existerar första gången, borde blivit hidden, men blir tomt. När väl lagret visats en gång, fungerar det.
När jag gjorde detta exempel, visade det sig fungera om visibility:hidden; ligger direkt i lagret, och inte i css.
Hur kommer man runt det, dvs hur får man exemplet att fungera?
<html>
<head>
<script>
function changeVis(obj){
var elm = document.getElementById('' + obj + '');
alert(elm.style.visibility)
if (elm.style.visibility == "hidden"){
elm.style.visibility = "visible";
}
else{
elm.style.visibility = "hidden";
}
}
</script>
<style>
#text{visibility:hidden;}
</style>
</head>
<body>
<div id="link"><a href="javascript:changeVis('text');">text</a></div>
<div id="text">diverse text</div>
</body>
</html>
Går inte läsa properties som satts i <style>. De som satts i style="" går dock.
Vet inte om det är likadant i alla webbläsare.
Skriv så här:
function changeVis(obj)
{
var elm = document.getElementById(obj);
elm.style.visibility = (elm.style.visibility == "visible" ? "hidden" : "visible");
}
J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
Nej, jag märkte det! Eller, ja, något blev fel. Nu när du nämner det, har jag för mig att jag läst det någonstans.
Varför går det att läsa dem som du skriver?
Googlade innan jag vände mig till wF, men det var inte lätt att hitta något passande, som synes. Oftast handlade det om två olika knappar.
Hittade http://home.arcor.de/michaels.interface/tutors/javascript/show.hide/ via wF, men jag tyckte den borde vara likadan. Testade den nu, och den klarar av att hämta direkt. Du vet säkert varför?
<html>
<head>
<script>
function changeVis(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible'){
obj[id].style.visibility = 'hidden';
}
else {
obj[id].style.visibility = 'visible';
}
}
</script>
<style>
#infotext{visibility:hidden;}
</style>
</head>
<body>
<div id="lager"><a href="javascript:changeVis('infotext');">text</a></div>
<div id="infotext">diverse text</div>
</body>
</html>
CssonMedlem sedan feb. 2000438 inlägg Det som sätts i <style> betraktas som default, och är därför tomma strängen. Genom att i if-satsen kolla mot det värde som inte har valts i <style> garanteras att if-satsen bara blir sann om värdet på visibility (i det här fallet) har ändrats.
Alternativt kan man kolla mot tomma strängen för att if-satsen ska bli sann om det är ursprungsvärdet, men det är inte lika självdokumenterande. Dessa två versioner är alltså likvärdiga:
function changeVis(obj) {
var elm = document.getElementById(obj);
elm.style.visibility = elm.style.visibility == 'visible' ? '' : 'visible';
}
function changeVis(obj) {
var elm = document.getElementById(obj);
elm.style.visibility = elm.style.visibility == '' ? 'visible' : '';
}
J.N. skrev:
Googlade innan jag vände mig till wF, men det var inte lätt att hitta något passande, som synes. Oftast handlade det om två olika knappar.
Hittade http://home.arcor.de/michaels.interface/tutors/javascript/show.hide/ via wF, men jag tyckte den borde vara likadan. Testade den nu, och den klarar av att hämta direkt. Du vet säkert varför?
I det exemplet har de ju gjort så som jag skrev...
sl0kMedlem sedan maj 2005562 inlägg Det du sätter i <style> är inte attribut på objektet och därför går det inte läsa dem.
För att läsa stylesheet info kan man använda document.stylesheets dock är det begränsat i vissa läsare.
http://www.quirksmode.org/dom/changess.html
J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
Erik Juhlin skrev:
I det exemplet har de ju gjort så som jag skrev...
Nja, för mig är det inte samma, eftersom de använder olika metoder för att hitta objekten, getElementsByTagName, respektive getElementById.
Tack till Csson och sl0k också.
Har också förstått att dubbelfnuttarna var onödiga. Varför förstår javascript att obj är ett objekt och inte ett strängvärde som måste infogas?
var elm = document.getElementById('' + obj + '');
Spelar ingen roll hur du fiskar upp elementet. Du kan ändå inte läsa av det som angetts i <style>. Anledningen till att deras funkar är att de skrivit så som jag skrivit.
Dubbelfnuttarna gör inget mer än att lägga på tomma strängar på en sträng. Som att skriva:
a = 23
b = 0 + a + 0
JavaScript förstår inte att obj är ett objekt eftersom att obj inte är ett objekt utan en sträng.
I.o.f.s. så är även strängar objekt i JavaScript, men man rör bara till det om man ser det så.
document.getElementById tar i alla fall en sträng.
J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
Erik Juhlin skrev:
Spelar ingen roll hur du fiskar upp elementet. Du kan ändå inte läsa av det som angetts i <style>. Anledningen till att deras funkar är att de skrivit så som jag skrivit.
Nä, det är jag med på, men att de är likvärdiga (ger samma resultat) förstod jag inte direkt.
Ang dubbelfnuttarna menade jag hur/varför obj-strängen läggs in och förstås som det objekt man önskar, utan att man infogar det som ett värde?
Svaret ligger alltså i att document.getElementById tar emot värdet och själv förstår att variabeln automatiskt ska ingå och behandlas i objektet getElementById?
Krångligt, och teoretiskt, jag vet! :stud
obj är en sträng oavsett om du konkatenerar det med en tomsträng.
Den har skickats in som en sträng till funktionen och förblir en sträng.
Sen skickas den vidare som en sträng till funktionen document.getElementById.
document.getElementById är en funktion som tar en sträng och sen returnerar ett objekt.
J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
Okej, tack för utläggningen.
Hur ska länken se ut, med brädgård eller this.href, behövs return false? Fick det ej att validera med return false, och eftersom sidan ej hoppade upp, försökte jag ej lösa det.
Vilket är korrektast?
<a href="#" onclick="javascript:changeVis('text');">
<a href="javascript:changeVis('text');">
Engine^Medlem sedan dec. 20003 887 inlägg Ta bort javascript: i onclick-eventet.
<a href="#" onClick="changeVis('text'); return false;">
Har du inte "return false" så hoppar den upp som du skrev.
Men dessutom så blir det som en sidväxling i Mozilla vilket gör att om man klickar på bakåt-knappen i webbläsaren så hoppar man bara tillbaka så man får bort #. Lite irriterande.
J.N.Medlem sedan apr. 20031 660 inlägg Okej, onclick är borta, return false är med!
<a href="#" onclick="changeVis('text'); return false;">
1300 inlägg!
