onmouseover function does not work inside domready event

Question

I am trying to apply some javascript code in an external website code editor. I am calling a simple onmouseover function from a div to give an alert but it does not work here is the code: error: ReferenceError: clickme is not defined

    <script type="text/javascript" charset="utf-8">
        document.addEvent('domready', function(){
            try {
                function clickme(){alert('?');}
            } catch(e) {
                console.log('ERR: '+e)
            }
        })
    </script>

<div onmouseover="clickme()">Click me</div>

I have to use document.addEvent('domready', function(){. Does anyone has any solution how can i use a function inside try-catch and document.addEvent('domready', function()?

i have to use domready because i can't change it as its in external website code editor. — Hasan, May 20 '16 at 07:29

score 0 · Answer 1 · answered May 20 '16 at 07:27

0

An alternative way to do this is by using a listener, you would need to be able to edit the HTML though:

HTML:

<div id="clickMePls">Click me</div>

JavaScript:

document.getElementById("clickMePls").addEventListener("mouseover", clickMeFunction);

function clickMeFunction() {
    alert("hi");
}

Demo: JSFiddle.

answered May 20 '16 at 07:27

Rani Kheir

1,049
12
15

@Hasan, yikes, sorry about that, missed the part past the code snippet. – Rani Kheir May 20 '16 at 07:48

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

Example Using Mootools

// 1st way of defining clickme before "domReady"
// var clickme; 
// 2nd way of defining clickme before "domReady"
 document.addEvent('load', function(){ 
          var clickme;
        });
 document.addEvent('domready', function(){
                try {
                    clickme = function(){alert('?');}
                } catch(e) {
                    console.log('ERR: '+e)
                }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js"></script>
<div onmouseover="clickme()">Click me</div>

Example no-Framework

With some help from this answer you can define clickme the first place then bind it to a function when domready.

var clickme;
(function() {
            try {
                clickme = function(){alert('?');}
            } catch(e) {
                console.log('ERR: '+e)
            }
})();

<div onmouseover="clickme()">Click me</div>

Example Using jQuery

var clickme;
        $(document).ready(function() {
            try {
              clickme = function(){alert('?');}
            } catch(e) {
                console.log('ERR: '+e)
            }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="clickme()">Click me</div>

edited May 23 '17 at 10:28

Community

1
1

answered May 20 '16 at 07:31

i can't change document.addEvent('domready', function(){ because its in external code editor. and i need an onclick/onousehover function to work – Hasan May 20 '16 at 07:37
@Hasan do take alook at both examples please i think the first one is what you want. – May 20 '16 at 07:46
please check here: https://www.dropbox.com/s/t655r38b6uwu89j/rough?dl=0 i placed both of your code in 2 files – Hasan May 20 '16 at 08:21
can you check this: http://mootools.net/core/docs/1.6.0/Utilities/DOMReady here is the domready function, and i checked no function calling works inside this domready? – Hasan May 20 '16 at 08:31
@Hasan my 1st answer involves no-framework (jQuery,mootools) my second answer involves jQuery but you want an answer for mootools?? Where is the tag for this? Your question's tags are jQuery javascript. Try the 1st example as it is. In the beginning you simply have to define clickme as a var. Then you bind clickme with the function you want. – May 20 '16 at 08:41
It does not work!
Click me
– Hasan May 20 '16 at 20:39
@Hasan sorry i did not explain correctly maybe, you don't need to wrap the code from the example inside window.addEvent(domready... just the code in the snippet will work. – May 20 '16 at 21:00
yes thats the problem, i already mentioned "i can't change document.addEvent('domready', function(){ because its a code editor is in external website. whatever JS code i write that goes inside domready document.addEvent('domready', function(){ ..............} – Hasan May 21 '16 at 13:52
@Hasan your main problem as you have explained is that you can't write any js before `document.addEvent('load', function(){`, sad but true is the fact you have to find a way to override this and simply place `var clickme;` before it. Or you can place it inside `document.addEvent('load', function(){` if you are given this option, just as in the example in mootools – May 21 '16 at 14:28

onmouseover function does not work inside domready event

2 Answers2