CODEWITHSUNDEEP
javascriptprototypejs
ck08150077
ck08150077

Reputation: 23

Prototype JS: Document.observe fires "undefined is not a function" error

I try to use the Event.observe method which is provided by Prototype JS. To be sure that the DOM is loaded, I use document.observe. This causes the error Uncaught TypeError: undefined is not a function. Prototype JS was loaded as you can see below:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>playground</title>
    <script language="javascript" type="text/javascript" src="../js/prototype.js"></script>
    <script language="javascript" type="text/javascript" src="../js/functions.js"></script>
</head>

<body>
    <div>
        <a href="#" id="meinLink">Hello World</a>
    </div>
    <input type="button" onclick="changeLinkText()" value="Change link by using Prototype">
</body>

JavaScript

//this works
var changeLinkText = function(){
    $("meinLink").innerHTML="prototypeWorks";
};

//this causes the error
Document.observe("dom:loaded", function() {
    $("meinLink").observe('click', function(e) {
        document.getElementById('meinLink').innerHTML="prototypeDoesntWork";
    });
});

Upvotes: 0

Views: 4268

Answers (1)

Jonast92
Jonast92

Reputation: 4967

Your D in

Document.observe("dom:loaded", function() {

is upper-case, fixing it to it's correct notation

document.observe("dom:loaded", function() {

will probably do the job.

You can also try to invoke an on-click-event listener.

$$('meinLink').invoke('on', 'click', '.item', function(event, el) {
    // el is the 'meinLink' element
});

It's even possible that just using on will do the job.

$("meinLink").on("click", function(event) {
   document.getElementById('meinLink').innerHTML="prototypeDoesntWork";
});

Upvotes: 2

Related Questions