Question

I´m just learning Prototype and I´m having a hard time finding good documentation/tutorials, I think that this problem should be easy to do, but I just can’t get it to work. I want to have hover effects on a div until its clicked on, then after its clicked on I want it to have normal behaviour. This is what I have so far:

document.observe("dom:loaded", function() {
        $("evtTarget").observe("mouseover", highlight);
        $("evtTarget").observe("mouseout", highlight);

        $("evtTarget").observe("click", function(evt) {
            $("evtTarget").stopObserving("mouseover", highlight);
            $("evtTarget").stopObserving("mouseout", highlight);
        });


    });

    function highlight(evt) {
        $("evtTarget").toggleClassName("highlighted");        
    }

When I use this code, my div doesn´t highlight, but I can´t figure out what I´ve done wrong. Any help or suggestions would be greatly appreciated!!!

Thanks!

edit: here´s my jsfiddle version:
http://jsfiddle.net/jaFuP/1/

Answer 1

Works just fine for me. The problem is likely elsewhere.

• Is there an element in the page with ID evtTarget?
• Did you remember to include Prototype in the page (e.g.
  <script src="path/to/prototype.js></script>)?
• Are there any errors that show up in the console that might be preventing your JavaScript from fully executing?
• Did you actually define a CSS highlighted class with styles other than what the element with id evtTarget already has?