For det første, med mindre det er form elementer, ikke bruk navn, det er mer krøkkete å jobbe med, mest fordi det ikke finnes noe som heter getElementByName, det heter getElementsByName, og i querySelector må man bruke attribute selectorer, altså "document.querySelectorAll('[name="bolle"]')", det er enklere med klasser og ID'er.
"s"'en i "getElementsByName" betyr alltid at flere elementer kan hentes, ettersom man kan ha samme navn på flere elementer, for eksempel på radio buttons er det vanlig med samme navn på grupper av radio buttons, og derfor returnerer alltid getElementsByName en "nodeList" ikke ett enkelt element.
Dersom du bruker ID i stedet, så blir ting mye enklere, og inline javascript er styggedom, med dagens nettlesere så bruker vi addEventListener.
Det kan være greit å også bruke klasser når man har flere like elementer slik som dette, men klasser returneres selvfølgelig også som en nodeList, altså et array-lignende objekt som inneholder alle elementene, uansett om det bare er ett element som matcher selectoren.
Du trenger heller ikke to anchor elementer, vi kan være litt fancy å lage en "toggle" funksjon som bytter teksten i det ene anchor elementer, så slipper vi å skjule og vise elementer osv.
Hvis vi endrer litt på HTML'en til noe mer fornuftig
PHP:
Bolle 1 : <a href="#" id="show1" class="lenke">Vis</a>
<br />
<div id="div1" class="bolle">bolle 1 er god</div>
Bolle 2 : <a href="#" id="show2" class="lenke">Vis</a>
<br />
<div id="div2" class="bolle">bolle 2 er bedre</div>
Bolle 3 : <a href="#" id="show3" class="lenke">Vis</a>
<br />
<div id="div3" class="bolle">bolle 3 er best</div>
Her har jeg benyttet både ID og klasser, men jeg kunne like gjerne brukt data attributer eller bare plasseringen av elementene, altså finne neste div etter hver anchor fordi strukturen alltid er lik.
Og så bruker vi querySelector, ettersom det er støttet i IE8, mens getElementsByClassName ikke virker i IE8, og querySelector er uansett mye mer anvendelig, samt addEventListener for events
PHP:
// henter alle lenker
var lenker = document.querySelectorAll('.lenke');
// looper over alle lenker og setter en event handler
for (var i=0; i<lenker.length; i++) {
lenker[i].addEventListener('click', myFunc, false);
}
// funksjonen som blir kjørt når noen klikker
function myFunc(event) {
event.preventDefault(); // hindrer scrolling ettersom href er #
var tall = this.id.slice(-1); // siste tegn i ID'en, vil ikke virke over 9
var text = this.textContent.trim(); // IE9 og opp, "innerText" for eldre IE
var bolle = document.getElementById('div' + tall);
var synlig = bolle.style.display;
if (text === 'Vis') { // toggle text
this.textContent = 'Skjul';
} else {
this.textContent = 'Vis';
}
if (synlig === 'block') { // toggle visibility
bolle.style.display = 'none';
} else {
bolle.style.display = 'block';
}
}
Demonstrasjon
Legg merke til at slike script som henter elementer på siden din, alltid må inkluderes etter elementene, eller må settes inne i en DOMContentLoaded / window.onload funksjon, ettersom elementene må være lastet inn når scriptet kjøres.
Nå er dette skrevet veldig "verbose" som det heter på fagspråket, altså det er skrevet veldig tydelig og enkelt for å være enkelt å lære, det finnes fiffigere måter å gjøre ting på
PHP:
[].slice.call(document.querySelectorAll('.lenke')).forEach(function(x) {
x.addEventListener('click', function(e) {
e.preventDefault();
(function(el, txt) {
txt = txt.trim() === 'Vis' ? 'Skjul' : 'Vis';
el.style.display = el.style.display === 'block' ? 'none' : 'block';
})(document.querySelector('#div' + this.id.slice(-1)), this.textContent);
}, false);
});
Demonstrasjon
