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:
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: