Mitglied der Javascript-Klasse ist nach Definition undefined

Ich versuche, Asides in einem HTML-Dokument zu machen. Die Nebenseiten sollen wie Inline-Fußnoten sein. Wenn der Leser über eine Kugel mausiert, wird der vollständige Text der Seite angezeigt. Wenn der Leser maust, ist der Text wieder versteckt. Ich versuche, die Menge an HTML zu minimieren, die benötigt wird, um diese Arbeit zu machen, also verwende ichMitglied der Javascript-Klasse ist nach Definition undefined

Wie auch immer, ich bin ziemlich neu in Javascript, und ich renne in was muss ein wirklich sein Anfängerfehler, den ich nicht herausfinden kann. Wenn ich den Testfall unten in einem Browser lade, wird der Text der Seite wie beabsichtigt durch eine Kugel ersetzt. Aber wenn ich die Maus über oder außerhalb der Kugel fahre, bekomme ich den Fehler "this.element is undefined". Aber es ist definiert, in der Klasse Prototyp! Was gibt?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <script type="text/ecmascript"> 
<!-- 
var asides = []; 

// object prototype 
function Aside(aside_element) 
{ 
    this.element = aside_element; 
    this.text = this.element.innerHTML; 
    this.element.onmouseover = this.show; 
    this.element.onmouseout = this.hide; 
    this.hide(); 
} 
Aside.prototype.hide = function() 
{ 
    this.element.innerHTML = "•"; 
} 
Aside.prototype.show = function() 
{ 
    this.element.innerHTML = this.text; 
} 

// get all <span> elements of class "aside" 
function make_asides() 
{ 
    span_elements = document.getElementsByTagName("span"); 
    for (var i = 0, len = span_elements.length; i < len, span_element = span_elements[i]; ++i) 
    { 
    if (span_element.className == "aside") 
     asides.push(new Aside(span_element)); 
    } 
    return asides; 
} 

// initialize script 
window.onload = function() 
{ 
    make_asides(); 
} 
--> 
    </script> 
    <title>Test Case</title> 
</head> 
<body> 
    <p>Hover over the bullet and see the magic text! <span class="aside">This is the magic text.</span></p> 
</body> 
</html>

Quelle

2012-04-09 Benjamin Kay

Der einfachste Weg, diese 'console.log (this) einzufügen wären zu debuggen arbeiten,', bevor die Leitung, die versagt Finde heraus, was das ist. – Hubro

Ich würde empfehlen, lernen jQuery - es hilft Ihnen HTML-Objekte zielen und verfügt über eine große Bibliothek von nützlichen Funktionen. – Mikhail

Da das Scoping falsch ist, müssen Sie mit Verschlüssen

var that = this; 
this.element.onmouseover = function(){ that.show(); }; 
this.element.onmouseout = function(){ that.hide(); };

Quelle

2012-04-09 16:14:24 epascarello

Zur Erläuterung: Sie haben nur die Funktion kopiert. Wenn der Browser ihn aufruft, ruft er ihn immer noch auf dem 'HTMLSpanElement' auf, nicht auf einem' Aside'; Das ist also nicht das, was du denkst. Da 'HTMLSpanElement' kein Element 'element' enthält, erhalten Sie einen Fehler. – Amadan

Vielen Dank, genaues Scoping über den Verschluss ist genau das, was benötigt wurde. –

Mitglied der Javascript-Klasse ist nach Definition undefined

Antwort

Verwandte Themen