DOM-element doorgeven als functieparameter
In eerdere lessen hebben we selectors van elementen doorgegeven aan onze functies, en onze functies kregen zelf de referenties naar deze elementen binnenin hun code. Er bestaat ook een andere aanpak: aan een functie kunnen reeds eerder verkregen referenties naar elementen worden doorgegeven.
Laten we een voorbeeld bekijken. Stel we hebben de volgende code:
<p id="elem1"></p>
<p id="elem2"></p>
Laten we een functie setText maken die
als eerste parameter een referentie
naar een DOM-element accepteert, en als tweede - de tekst voor het element:
function setText(elem, text){
elem.textContent = text;
}
Laten we de door ons gemaakte functie gebruiken om de tekst van onze alinea's in te stellen:
let elem1 = document.getElementById('elem1');
setText(elem1, 'text1');
let elem2 = document.getElementById('elem2');
setText(elem2, 'text2');
Maak een functie appendText die
als eerste parameter een DOM-element accepteert,
en als tweede - tekst. Zorg ervoor dat deze functie tekst aan het einde van dit element toevoegt.
Er worden alinea's gegeven. Verkrijg ze, doorloop ze met een lus
en voeg aan elk een '!' toe aan het einde
met behulp van de functie appendText, gemaakt in de vorige
taak.
Maak een functie setValue die
als eerste parameter een referentie
naar een invoerveld accepteert, en als tweede - tekst. Zorg ervoor
dat deze functie de doorgegeven tekst in de value van het invoerveld plaatst.