I have this simple HTML page:
<html>
<head>
<script>
share();
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
I need to call the function share from the <head> and the function itself must be defined in the <body>.
The above code leads to undefined function error.
This is just a simplified script to explain the issue so it needs to be done that way. Is there a way around this?
You need to wait for the body to be loaded, so
<html>
<head>
<script>
window.onload=share;
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
You can use
<html>
<head>
<script>
windows.onload = function(){
share();
}
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
or you can use Jquery version
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
Both of them work in this condition however if you want to know the difference between this tow I suggest to see this
window.onload vs $(document).ready()
Use
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
Related
I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
I have the following html file, called a.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
</body>
</html>
And the following Javascript file, called a.js
(function() {
$(document).trigger('foo');
}());
When I open a.html, the trigger call in a.js is called, the line
$(document).on('foo', function () {
is called but the alert is never called. What am I doing wrong?
The issue in the above code as per my understanding is a.js is getting loaded before the below script.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
And this event is getting bind after its already been called in a.js.
Try loading a.js below above script like below.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
place both the scripts at one place in the order as shown it will work..
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<label> rerwnr</label>
<script>
</script>
</body>
</html>
(function() {
$(document).on('food', function () {
alert('test');
});
$(document).trigger('food');
}());
https://codepen.io/pavankumark/pen/WExNEg
Check out the link here for more details.
Try adding the script file a.js at the end of body,
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
</body>
You need to update your code like this:
You can put script code to a.js file:
Here id demo: https://jsbin.com/fukujad/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("test", function(){
alert("test triggered");
});
$(document).trigger("test");
});
</script>
</body>
</html>
In a.js you call trigger foo before you defined it,
try to use document ready like this and it will work
$(document).ready(function(){
$(document).trigger('foo');
})
It will wait to load whole document (and all scripts in the document)
Can you please help me understand where the code is wrong. The below code doesn't invoke the event handler for window.onload event.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
window.addEventListener("onload", onLoad)
function onLoad(e)
{
debugger;
console.log(Object.getOwnPropertyNames(e));
}
</script>
</head>
<body>
</body>
</html>
Is this what you want?
window.onload = function(e) {
debugger;
console.log(Object.getOwnPropertyNames(e));
};
I'm trying to do following with jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#test').hover(function(){
alert('sub');
});
</script>
</head>
Thanks.
I'm assuming that HTML DOM element with id="test" exists.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
By the way, CodeIgniter has nothing to do with your issue.
Seems like you are accessing an element which does not exists.
Try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
I have a .js file defined as follows:
<script>
function sayHello() {
alert("Hello World");
}
</script>
And I have a .html file defined as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/testCSS.css">
<title>test html</title>
</head>
<body>
<script type="text/javascript" src="js/testJS.js"></script>
</body>
</html>
How can I call the sayHello() function?
script.js
function sayHello() {
alert("Hello World");
}
index.html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>
<script>
sayHello();
</script>
</body>
</html>
You just need to call it!
let me explain in an example.
let's say you have a button in that html that calls sayHello function.
<button type="button" onclick="sayHello ()">Say hello</button>
I think you should take a look at here.
Jus replace the link to script with content of .Js file...
Or call the function
<script>
sayHello()
</script>