Vraag javascript function meerdere malen gebruiken.

Ray55

Nieuw lid
Hallo,

Ik heb op mijn website 3 kolommen met tekst gemaakt. Aangezien dit een grote lap tekst is heb ik een stuk javascript dat de tekst afbreekt, er een button onder zet met [meer], of [minder].
Als ik dit in alle 3 de kolommen gebruikt dan werkt het niet goed. bv ik klik in kolom 3 op [meer] en dan gebeurd de actie alleen in kolom 1.
Ik begrijp dat dit komt door de id's die gebruikt worden in het script.

Nu kan ik dat ondervangen door het script 3 keer te kopieren, de id's aan te passen en dan werkt alles prima.
in kolom 2 gebruik ik dan de id's: dots2, more2 en myBtn2, in kolom 3 dus 3.

Maar ik vraag mij toch af of dit niet mogelijk is met maar 1 script, aangezien ik wel 15 kolomen tekst met zo'n meer/minder button kan zetten en dan zou je 15 keer dat script moeten kopieren.

Dit is het script:

[CODE
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");



if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Meer";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Minder";
moreText.style.display = "inline";
}
}
</script>
[/CODE]

Hier roep ik het aan in de index.html

[CODE
<p><strong>Wat is bioactief?</strong><br />
In de terrariumhobby slaat de term ‘bioactief’ op een huisvestingstype waarin geprobeerd word natuurlijke processen te simuleren of creëren. Als het ware een klein ecologisch systeem die het natuurlijk habitat van de gehuisveste soort nabootst en een biologische vorm van afvalverwerking heeft.</p><center><span id="dots">...</span></center><span id="more">
<p>Deze techniek is eigenlijk sinds jaar en dag al bekend en de grote favoriet in de aquariumhobby. Bodem, filtratie, bewoners en vaak planten zijn essentiële onderdelen in het nabootsen en in evenwicht houden van een leefomgeving. In een aquarium is een filter niet alleen om je water helder te houden maar dient deze ook als oppervlakte voor belangrijke micro-organismen om afvalstoffen te verwerken en neutraliseren. Bewoners zijn niet alleen om naar te kijken maar ook om algen of restafval te eten. Planten helpen bij de afvalverwerking, de pH-waarde stabiel houden en zuurstofafgifte. Elk deel is onderdeel van een natuurlijke aankleding maar ook ter onderhoud en ondersteuning van deze omgeving. Vaak is een balans nodig om alles in stand te houden. Zonder vissen en ongewervelden worden er geen afvalstoffen geproduceerd waardoor er geen voeding is voor de micro-organismen. Zonder micro-organismen is er geen afvalverwerking waardoor deze concentratie in het water te hoog word en uiteindelijk schadelijk kan zijn.</p>
<p>In een terrarium werd een dergelijke balans voornamelijk gevonden in paludaria. Planten werken als natuurlijke filters van lucht en water. Deze halen hun voeding onder andere uit afvalstoffen geproduceerd door de bewoners. Kleine ongewervelden als springstaartjes die men voornamelijk als voeding in het verblijf plaatsten bleken ideale diertjes te zijn om schimmels, algen en restafval te verwerken. Deze balans probeert men nu in steeds meer biotooptypes voor diverse soorten te bewerkstelligen.</p></span>
<center> <button onclick="myFunction()" id="myBtn">Meer</button></center>
[/CODE]
 

m44rtn

Gevestigd lid
Het probleem zit hem in dat je de elementen allemaal dezelfde naam geeft, getElementById() zal dan alleen de eerste id die het vindt gebruiken (en dat is natuurlijk altijd kolom 1 want die staat als eerste in de html)

Je moet dus in elke kolom een andere naam gebruiken voor je id's zo kan je in kolom 1 wel een 'dots' doen, maar om het goed te laten werken heb je dan een 'dots2' nodig bij de andere kolom. Alleen dan zit je met je huidige code nog steeds met een probleem: want de functie gebruikt altijd alleen de id 'dots'. Om dat op te lossen gebruik je parameters in de functie.

Dan krijg je als functie deze:
JavaScript:
/* button, meer en dots zijn variabelen waar je de id naam kan doorgeven */
function myFunction(button, meer, dots) {
    /* die variabelen zijn strings, dus die kan je doorgeven aan getElementById() */
    var dots = document.getElementById(dots);
    var moreText = document.getElementById(meer);
    var btnText = document.getElementById(button);

    /* dit is nog steeds hetzelfde gebleven */
    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Meer";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Minder";
        moreText.style.display = "inline";
    }
}
Zoals je ziet weinig verschil met jouw functie, want die was op zichzelf goed. Maar nu kan je parameters gebruiken en de id doorgeven waardoor hij altijd de goede kolom gaat doen.

De functie gebruik je dan zo:

HTML:
<!-- kolom 1 -->
<center> <button onclick="myFunction('myBtn', 'more', 'dots')" id="myBtn">Meer</button></center>

<!-- kolom 2 -->
<center> <button onclick="myFunction('myBtn2', 'more2', 'dots2')" id="myBtn">Meer</button></center>
Je moet niet vergeten binnen de kolommen de id's dan dezelfde naam te geven.

Als je vragen hebt over deze oplossing, vraag ze! Ik heb liever dat je het begrijpt dan dat je alles copy/paste en dat je niet weet of snapt hoe het werkt. :)
 

m44rtn

Gevestigd lid
Je moet niet vergeten binnen de kolommen de id's dan dezelfde naam te geven.
dit ben ik wel vergeten te doen in het voorbeeld. Zoals je ziet staat er nog steeds id="myBtn" in de tweede kolom terwijl dat moet zijn: id="myBtn2".
 

Nieuwste berichten

Bovenaan Onderaan