Javascript - Eventhandler

hiphap13

Grünschnabel
irgendwie funktioniert es nicht und daher bin dankbar wenn Jemand mir sagen kann wo den Fehler liegt...

ich habe folgende Aufgabe:

2) Fügen Sie dort den Code ein, um mit window.onload eine anonyme Funktion als Callback aufzurufen, wenn die Webseite fertig geladen ist. Tipp – das haben wir in den JavaScript-Dateien im Heft so mehrfach gemacht.
3) Registrieren Sie in der Callbackfunktion, die nach dem Laden der Webseite ausgeführt wird, mit der Methode document.getElementById() für den Eventhandler onmouseover beim Element mit der Id sensitiv eine anonyme Callbackfunktion.
4) Registrieren Sie in der Callbackfunktion, die nach dem Laden der Webseite ausgeführt wird, mit der Methode document.getElementById() zusätzlich für den Eventhandler onmouseout beim Element mit der Id sensitiv eine weitere anonyme Callbackfunktion. Sie haben damit sowohl für onmouseover als auch onmouseout jeweils einen Eventhandler zur Verfügung, um dort beim jeweiligen Ereignis gewisse Aktivitäten auszuführen.
5) Ändern Sie in der Callbackmethode bei onmouseover die Hintergrundfarbe des Divs mit der Id sensitiv auf den Wert "red".
6) Ändern Sie in der Callbackmethode bei onmouseover den Textinhalt des Divs mit der Id sensitiv auf "Mauszeiger im Bereich".
7) Ändern Sie in der Callbackmethode bei onmouseover die Textfarbe des Divs mit der Id sensitiv auf "yellow".
8) Ändern Sie in der Callbackmethode bei onmouseover die Transparenz (opacity) des Divs mit der Id zusatz auf den Wert 1. Der Container wird damit sichtbar. Beachten Sie, dass Sie damit nicht das Element ändern, bei dem der Eventhandler aufgerufen wird1, sondern ein anderes Element.

und so sehen meine Code aus:
HTML:
HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Einsendeaufgabe 1</title>
        <meta name="viewport" content=
        "width=device-width; initial-scale=1.0">
        <link rel="stylesheet" type="text/css"
            href="lib/css/einsendeaufgabe1.css" />
        <script type="text/javascript" src="lib/css/einsendeaufgabe1.js"></script>
    </head>
    <body>
        <div id="sensitiv">Mauszeiger nicht im Bereich
        </div><hr />
        <div id="zusatz">Zusatzinformation</div>
    </body>
</html>


CSS:
#sensitiv {
    width: 200px; height: 50px;
    background: yellow; color: red;
    border-style: solid; border-width: 5px;
    font-size: 20px; text-align: center;
}

#zusatz {
    opacity: 0;
    width: 200px; height: 20px;
    background: green; color: white;
    text-align: center;
}

Javascript:

window.onload = function() {
    document.getElementById("sensitiv").onmouseover = function () {
        document.getElementById("sensitiv").style.backgroundColor="red";
        document.getElementById("sensitiv").innerHTML="Mauszeiger im Bereich";
        document.getElementById("sensitiv").style.Color="yellow";
        document.getElementById("zusatz").style.opacity="1";
       
    }
    document.getElementById("sensitiv").onmouseout = function(){
        document.getElementById("sensitiv").style.backgroundColor="yellow";
        document.getElementById("sensitiv").style.Color="red";
        document.getElementById("zusatz").style.opacity="0";
        document.getElementById("sensitiv").innerHTML="Mauszeiger nicht im Bereich";
    }
}
 
Zuletzt bearbeitet von einem Moderator:

Andreas-B

Mitglied
du hast ein Tippfehler in den Zeilen:
document.getElementById("sensitiv").style.Color="yellow";
document.getElementById("sensitiv").style.Color="red";
(Tipp: es ist der gleiche)

Lösung:
die Eigenschaft color wird klein geschrieben.
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
Das brauchst du theoretisch auch nur einmal zu schreiben
document.getElementById("sensitiv")
document.getElementById("zusatz")
dann sieht der Code schon mal besser aus.
Deine style Attributen kannst du auch zusammen packen, im Quellcode kommt dann sowieso das gleiche raus
Javascript:
window.onload = function() {
var sen=document.getElementById("sensitiv");
var zu=document.getElementById("zusatz");
    sen.onmouseover = function () {
        sen.style="background:red;color:yellow";
        sen.innerHTML="Mauszeiger im Bereich";
        zu.style='opacity:1';
    }
    sen.onmouseout = function(){
        sen.style='background:yellow;color:red';
        sen.innerHTML="Mauszeiger nicht im Bereich";
        zu.style='opacity:0';
    }
}
Du könntest auch mit Klassen arbeiten, das wäre eigentlich sogar einfacher
 

hiphap13

Grünschnabel
Vielleicht solltest du mal damit anfangen, deine Hausaufgaben selber zu machen. Bisher lässt du das ja immer das Forum erledigen.
hm magst du mal genauer lesen worum ich hier biete? ich stelle hier nicht einfach irgendwelche Aufgaben rein und erwarte dann die Lösung. Ich habe meine Hausaufgabe gemacht und wollte wissen warum die nicht funktioniert...
 

ComFreek

Mod | @comfreek
Moderator
Zumindest ansatzweise zu versuchen herauszufinden, warum etwas nicht funktioniert, gehört bestimmt auch zur Hausaufgabe.
Kein Aufgabensteller erwartet, dass du fehlerfreie Abgaben beim ersten Versuch erstellst. Fehler zu machen gehört zur Intention der Aufgabe.
 

hiphap13

Grünschnabel
Zumindest ansatzweise zu versuchen herauszufinden, warum etwas nicht funktioniert, gehört bestimmt auch zur Hausaufgabe.
Kein Aufgabensteller erwartet, dass du fehlerfreie Abgaben beim ersten Versuch erstellst. Fehler zu machen gehört zur Intention der Aufgabe.
ohne Zweifel gehört es auch dazu. Aber glaub mir, ich hab viel Zeit in die Aufgabe investiert und bin immer noch nicht weiter gekommen
 

basti1012

Erfahrenes Mitglied
Aber glaub mir, ich hab viel Zeit in die Aufgabe investiert und bin immer noch nicht weiter gekommen
Warum nicht?
Steht doch alles in dem Thema jetzt, wie es geht und was falsch ist.
post 2# zeigt dir was du falsch gemacht hast.
post 5# zeigt dir wie du es etwas kürzer und übersichtlicher machst, mit Beachtung von post 2#