<img id="trigger" src="https://www.google.se/images/srpr/logo11w.png" alt="Click me" />
<p id="target">Some random text</p>
<script>
(function() {
document.getElementById('trigger').onclick = function() {
var target = document.getElementById('target');
target.style.display = target.style.display === 'none' ? 'block' : 'none';
}
})();
</script>
I kommenterandets och diskussionens namn så skulle jag då vilja skippa den "självstängande" taggstilen på `<img>`-taggen: det har ingen som helst effekt om man inte skriver XHTML, vilket i sig vanligen inte är att rekommendera idag.
Jag skulle också vilja flytta definitionen av `target` utanför den inre funktionen för att undvika att webbläsaren ska behöva parsa DOM varje gång bilden klickas för att hitta `target`-elementet. Dessutom är det ofta trevligt för läsbarheten att inte "stapla" alltför många anrop på varandra, så jag skulle även flytta ut `trigger` separat. Inget av detta ger några hastighetsbekymmer i vilket fall i ett sådant här enkelt fall, men det ser logiskt bättre ut, i mina ögon.
object.onclick() är inte så poppis idag av flera anledningar (se "Notes"), till fördel för addEventListener(), vilket ej heller skiljer sig speciellt mycket kodmässigt men är en bättre vana.
Ett komplett testdokument:
<!doctype html>
<meta charset="utf-8">
<title>Test</title>
<img id="trigger" src="https://www.google.se/images/srpr/logo11w.png" alt="Click me">
<p id="target">Some random text
<script>
(function() {
var trigger = document.getElementById('trigger'),
target = document.getElementById('target');
trigger.addEventListener('click', function(e) {
target.style.display = target.style.display === 'none' ? 'block' : 'none';
}
);
})();
</script>
där jag även minimerat användningen av "onödiga" (valbara) taggar, vilket säkert provocerar någon .
Det som troligen är mest "magi" i koden för någon som inte sett så mycket Javascript innan är inneslutningen `(function() {…})();` som ser rätt märklig ut. Ett sätt att initialt behandla detta är att acceptera att det "låser in" det som är innanför klamrarna i en egen kontext, och att det generellt är bra programmeringspraxis att separera kodstyckan så att de inte "smutsar ner" globalt (jag ser det snarare som en fråga om varför jag inte ska använda sådan separation i ett visst fall än varför jag ska göra det). Det är ett väldigt vanligt använt "mönster" i Javascript. Vill man ha större inblick i vad som händer så kan man söka efter nyckelorden "closure" och "self-invoking function".
JSFiddle av ovanstående för enkla tester ifall någon vill modifiera något.
Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.
