I'm trying to call a function within the html page from an external loaded index.js file, but I always get
Uncaught ReferenceError: displayy is not defined
Inside my html page:
<script type="text/javascript" src="index.js"></script>
<script>
$( document ).ready(function() {
displayy();
});
</script>
The index.js file:
$( document ).ready(function() {
alert('loaded');
function displayy() {
alert('executed');
}
});
I've also tried:
<script>
window.onload = function() {
displayy();
};
</script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
displayy();
});
</script>
You need not run displayy again from the script.
The following works:
$(document).ready(function() {
alert('loaded');
displayy();
function displayy() {
alert('executed');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Inside your index.js you can call your function using the window object.
window.displayy = function(){
return "hello!"
}
and then you call it
window.displayy(); or displayy();
A better solution is to declare your function in the higher scope like this:
var displayy;
$( document ).ready(function() {
alert('loaded');
displayy = function () {
alert('executed');
}
});
N.B: Using global variables are bad but it should solve your problem. Please take a look here: I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?
Attach your functions to the window object. Something like this:
// Set the container!
window.app = {};
// Define the function.
window.app.say_hello = function(name) {
alert(`Hello ${name}`);
};
// Call the function.
app.say_hello("Iran");
I tried everything. Only this solution worked. :)