Inhoud

Hoofdstuk 7 - Opdracht 2

De opdracht:

Maak een div-element met de tekst: Hello world!
Zodra je met je muis over deze div heen gaat moet de tekst schuin gedrukt worden. Zodra je met je muis weer van deze div af gaat moet de tekst weer normaal worden.
Als je op de div klikt moet de tekst in het Nederlands vertaald worden ("Hallo wereld!" dus). Als er dan weer opnieuw op geklikt wordt verandert de tekst weer in Engels. Dus bij elke klik verandert de taal.
Hoe vaak de tekst ook vertaald wordt, hij moet altijd schuin gedrukt worden als de muis er overheen gaat, en weer normaal als de muis van de div af gaat.
Tip: geef de div met CSS (gewoon via het style-attribuut) een achtergrond zodat je kan zien wanneer je met je muis er boven hangt en wanneer niet.
Alleen voor het toekennen van de events mag de functie document.getElementById() gebruikt worden, verder niet.

Het antwoord:

Zie code.
Twee regels code kunnen misschien wat verwarrend zijn. Namelijk regels 8 en 11, omdat er 2x een toekenning (met de =) in staat. Dit werkt als volgt: eerst wordt er een waarde aan de variabele tekst toegekend (dit gebeurt eerst omdat dit tussen haakjes staat). Daarna wordt die waarde gebruikt en worden de strings "" en "" eraan vast geplakt.
Je zou de operator = dus als een soort speciale functie kunnen zien:

function operator=(variabele, nieuweWaarde)
{
    variabele = nieuweWaarde;
    return variabele;
}

JavaScript:

function vertaal()
{
    //als de huidige inhoud ......
    if(this.innerHTML == "Hello world!")
    {
 
        // Pas daarna de innerHTML aan van this, dus het element waarvan de event af komt
 
        this.innerHTML = "<i>" + tekst + "</i>";
    }
    else
    {
        // Hetzelfde, maar dan met de Engelse tekst
 
        this.innerHTML = "<i>"+ tekst +"</i>";
    }
}
function maakSchuin()
{
    this.innerHTML = "<i>" + tekst + "</i>";
}
function maakNormaal()
{
    this.innerHTML = tekst;
}
function maakEvents()
{
    // Ken de functies aan de juiste events toe:
    document.getElementById("de-div").onclick = vertaal;
    document.getElementById("de-div").onmouseover = maakSchuin;
    document.getElementById("de-div").onmouseout = maakNormaal;
}
window.onload = maakEvents;

HTML:

<div id="de-div" style="background:#eee;">Hello world!</div>