Defining and calling functions in jquery

Question

I'm trying to call a function defined in an external .js using jQuery, but nothing happens. Here is my html:

<head>
    <title>Página de pruebas jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--<link rel="StyleSheet" href="css/style.css" type="text/css" />-->
    <script type="text/javascript" src="jquery-1.10.2.min.js" /></script>
    <script type="text/javascript" src="E1.js" />
    </script>
</head>

<body>
    <div id="contenedor">
        Pasa el ratón por aquí
    </div>

    <div id="mostrador" style="display: none;">
        Muy bien, has pasado el raton por encima!
    </div>
</body>

And my jQuery code:

$(document).ready(function(){
    $("#contenedor").mouseenter(mostrarTexto(evento));

    $("#contenedor").mouseleave(ocultarTexto(evento));
});


    var mostrarTexto=function(evento){
        $("#mostrador").css("display","block");
    }

    var ocultarTexto=function(evento){
        $("#mostrador").css("display","none");
    }

I've tried a lot of things I've searched, but i can't get it to work

first check whether jquery is in correct path..try to put alert inside document.ready(function()) — sree, Jan 23 '14 at 12:54
Make sure the script files(jQuery library and E1) are properly imported in your page. — kpmDev, Jan 23 '14 at 13:14

kpmDev · Accepted Answer · 2014-01-23T13:11:42.890

Make sure the script files(jQuery library and E1) are properly imported in your page.

And Try this.

DEMO: http://jsfiddle.net/h9Veg/

$(document).ready(function(){
    $("#contenedor").mouseenter(function() { mostrarTexto(); });

    $("#contenedor").mouseleave(function() { ocultarTexto(); });
});


    var mostrarTexto=function(evento){
        $("#mostrador").css("display","block");
    }

    var ocultarTexto=function(evento){
        $("#mostrador").css("display","none");
    }

score 0 · Answer 2 · answered Jan 23 '14 at 12:54

0

Not sure if this will help, but you close your <script> tag twice.

<script type="text/javascript" src="E1.js" />
</script>

Should be

<script type="text/javascript" src="E1.js">
</script>

answered Jan 23 '14 at 12:54

Magnus Engdal

5,446
3
31
50

because I call 2 .js files – Alex Jan 23 '14 at 12:55
Either way, closing the `` inside the tag won't work. Remove the `/`. – Magnus Engdal Jan 23 '14 at 12:57
@Magnus better to suggest in a comment line,I think here Answer not required for closing script tag. – shankar.parshimoni Jan 23 '14 at 12:58
While I do agree that it would have been more suited as a comment, self-closing ` – Magnus Engdal Jan 23 '14 at 13:01
You should try it in combination with @Vasu's answer, and remove the self-closing from both your ` – Magnus Engdal Jan 23 '14 at 13:06

score 0 · Answer 3 · answered Jan 23 '14 at 12:55

This is the possible solution:

$(document).ready(function(){
    $("#contenedor").mouseenter(function(evento) {
        mostrarTexto(evento);
    });

    $("#contenedor").mouseleave(function(evento) {
        ocultarTexto(evento);
    });
});


var mostrarTexto=function(evento){
    $("#mostrador").css("display","block");
}

var ocultarTexto=function(evento){
    $("#mostrador").css("display","none");
}

score 0 · Answer 4 · answered Jan 23 '14 at 13:08

Your code is kinda wierd.

Why do you use

var mostrarTexto=function(evento){
    $("#mostrador").css("display","block");
}

why not

function mostrarTexto(evento){
    $("#mostrador").css("display","block");
}

and if you want to be falsifiable use the assignment bound to document root, not best practice but it helps when code gets ugly

document.mostrarTexto=function(evento){
    $("#mostrador").css("display","block");
}

And BEFORE all.. check if your function exists, and the scope of it. Because scope is a tricky thing.

Defining and calling functions in jquery

4 Answers4