Calling JavaScript function before the end of body - javascript

How do I call a JavaScript function before the end of the body of an HTML page?

You can just place a <script> block in there, like this:
<script type="text/javascript">
myFunction();
</script>
</body>
Also, if you're using a framework of some sort, most of them have handlers for when the DOM is ready, or you can use window.onload, whatever best fits your situation.

<html>
<head>
<script...>
function helloWorld() {
alert('Hello world!');
}
</script>
</head>
<body>
...some content...
<script...>
helloWorld();
</script>
</body>
</html>

Related

Using vanilla javascript, add class to body from within head

I want to do a quick javascript check from within the head tag, like so:
<html>
<head>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</head>
<body class='no-js'>
...
</body>
</html>
This doesn't work. Cannot read property classList of null, which...fair enough. If I move the <script> tag into <body>, everything works, but I want the <script> tag in <head>.
What are my options?
EDIT: I should have been much clearer about the error. I realize the problem is that body hasn't loaded when I'm trying to to add the class. However, I was using a bit of Modernizr originally and it was somehow able to modify the body class from within the head and I don't think it was using window.onload or anything like that.
Run the code after body is loaded. There are several approaches to solve the problem:
Move the code into a named function defined in global context and call it in onload.
<html>
<head>
...
<script>
function load() {
document.body.classList.remove("no-js");
document.body.classList.add("js");
}
</script>
</head>
<body onload="load();" class='no-js'>
...
</body>
</html>
Or move code to DOMContentLoaded event listener callback in order to call after dom elements are loaded.
<html>
<head>
...
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.remove("no-js");
document.body.classList.add("js");
});
</script>
</head>
<body class='no-js'>
...
</body>
</html>
Or move the entire script tag to the end of the page.
<html>
<head>
...
</head>
<body class='no-js'>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</body>
</html>
At the time the javascript is executed there is no body tag, because the browser hasn't gotten around to it yet. You need to either add the script tag in the body, or add it as an event to execute when the document has loaded. See DOMContentLoaded for an example.

Javascript doesn't work in html file

I have html file:
<html>
<head>
<script type="text/javascript" src="new.js"></script>
</head>
<body>
<p id="contentBI" >you should click here! </p>
</body>
</html>
and javascript file:
function doAlert() {
alert("hi!");
}
function addevent () {
theBI=document.getElementById("contentBI");
theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);
Javascript doesn't run.
use window.addEventListener("load",addevent); instead of document.addEventListener("load",addevent);
DEMO
So you want a document ready like jquery, try this:
document.addEventListener("DOMContentloaded",addevent, false);
Demo here
Assuming this is all of your code, the first issue you should tackle is telling your page where your Javascript is at.
Try placing your script between <script> </script> tags within your HTML file.
</head>
<body>
<p id="contentBI" >you should click here! </p>
<script>
function addevent (){
theBI=document.getElementById("contentBI");
theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);
</script>
</body>
</html
It still won't work, most likely. But it's a start.

Execute JS on page load without using jQuery

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?
For example...
<html>
<head>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999;
margin:20px;"></div>
</body>
</html>
If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?
I use:
<script type="text/javascript">
window.onload = function(){
//do stuff here
};
</script>
This way you don't have to use any onload tags in your html.
The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:
<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</body>
</html>
You can use a variety of methods to accomplish this.
The simplest, easiest method would be to simply add the script tag at the end of your body tag:
<html>
<head>
<title> Example </title>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script type="text/javascript">
// Do stuff here
</script>
</body>
</html>
The way jQuery does it is something similar to:
window.onload = function() {
// Do stuff here
}
I usually just do it the second way, just in case.
To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.
You can use onload in your body tag.
<head>
<script type="text/javascript">
function doSomething() {
//your code here
}
</script>
</head>
<body onload="doSomething()">

assign the javascript code by a javascript function

For some reason, I have to assign the javascript code by a javascript function, like the code at below.
<html>
<head>
<script>
window.onload = init();
function init(){
document.getElementsByName('content')[0] = alert('LOL');
}
</script>
<script type="text/javascript" name="content">
</script>
</head>
<body>
</body>
</html>
After page load, the expected result should like following
<html>
<head>
<script type="text/javascript">
alert('LOL');
</script>
</head>
<body>
</body>
</html>
However, the alertbox doesn't display. Is there anyone can help me?
To get you started:
Don't misspell script
Don't misspell elements
There is no name attribute for script elements
onload = foo() will call foo immediately and assign its return value to onload. Get rid of the ()
Browsers (AFAIK) won't respect modifications to existing script elements, only new ones. So use createElement and appendChild
Write this instead:
window.onload = function init(){
document.getElementsByName('content')[0] = 'LOL';
alert('LOL');
}
Just changing the text of the javascript tag won't make it execute, because it is in the client side. I would do it more like this:
window.onload = init();
function init(){
document.getElementsByName('content')[0] = function SomeMethod(){ alert('LOL'); };
SomeMethod();
}

Store contents of a tag in Javascript variable

I am learning Javascript and I am trying to learn some pretty basic stuff. Basically I have some text in a <p> tag which I want to append to a variable. However it is not working an I'm not sure why. Any help will be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</head>
<body>
<p class="first">Hello World </p>
</body>
</html>
Wrap your code in $.ready handler:
<script type="text/javascript">
$(function(){
var x = $('p').html();
document.write(x);
});
</script>
The ready handler fires after DOM has loaded and parsed meaning only then you can maipulate tags (or DOM).
You are running your script before The <p class="first">Hello World</p> is reached in your HTML. Put your script in the body instead just after the <p> tag:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
</head>
<body>
<p class="first">Hello World</p>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</body>
</html>
You can also use jQuery's ready function like some others have said, but that's an inefficient solution since you already know at which point in the document the <p> tag is loaded. It's much better to run your script as soon as it's loaded then to wait for the whole document to load using $.ready.
I can't see anything what isn't working (example)
maybe you should write
jQuery(document).ready(function($){
//your javascript code
})
but if it doesn't work with that either I should remind you that document.write normally replaces the content

Categories

Resources