wucher wichtel: OOP mit JavaScript

Beitrag lesen

Hallo!

Vielen Dank für deine Hilfe. Ich habe es so gemacht, wie du es beschrieben hast. Allerdings kommt immer eine [1]Fehlermeldung.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
  
function Fader(){  
  
 this.opacity   = 1;  
 this.speed   = 0.01;  
 this.stopOpacity = null;  
 this.id    = null;  
 this.isFadeOut  = false;  
 this.errorMsg  = "Ein Fehler";  
  
 this.fadeOut = function (id, stopOpacity) {  
  this.isFadeOut   = true;  
  this.id    = document.getElementById(id);  
  this.opacity  = 1;  
  this.stopOpacity = stopOpacity;  
  
  newFadeOutOpacity   = window.setInterval("Fader.newFadeOut()", 20);  
 };  
  
 Fader.newFadeOut = function () {  
  Fader.id.style.opacity = Fader.opacity;  
// [1]  
// Fehler: Fader.id has no properties  
// Zeile: 26  
  Fader.opacity   = Fader.opacity - Fader.speed;  
  
  if ( Fader.opacity <= Fader.stopOpacity ) {  
   window.clearInterval(newFadeOutOpacity);  
   Fader.id.style.visibility = "hidden";  
  }  
 };  
}  
 var myFader = new Fader();
~~~~~~html
  
</script>  
</head>  
  
<body>  
<h3 id="opacity_bsp">Beispiel</h3>  
<p>  
 <a href="#" onclick="myFader.fadeOut('fade', 0); return false">fadeOut()</a> |  
 <a href="#" onclick="myFader.fadeIn('fade', 1); return false">fadeIn()</a>  
</p>  
<div style="height: 230px;">  
 <div id="fade" class="text" style="height:210px; width:180px; overflow:hidden; background-color:#000000; color:#FFFFFF">  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  sed do eiusmod tempor incididunt ut labore et dolore magna  
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse  
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
  cupidatat non proident, sunt in culpa qui officia deserunt mollit  
  anim id est laborum.  
 </div>  
</div>  
</body>  
</html>  

Ich habe keine Ahnung, warum es da zu einem Fehler kommt. Hast du eine Idee? Vielen Dank!

PS: Ich werde "Fader" noch durch "this" ersetzen, aber das mache ich erst gegen Ende, wenn es funktioniert. Das macht es für mich am einfachsten :-)

Nochmals vielen Dank!

ciao, ww

--
sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)