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()">
Related
I found JavaScript I like to use but I need It to be written in the html page and not as a separate file ... Here is a JS fiddle
Here is how I tried to write it:
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script>
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
</script>
</body>
I know that I can wrap the numbers with <span> tag but
in my actual page I have numbers dozens of times during the text and this is way I rather use the script...
What do I need to change in the script to make it work?
Two things, use <script type='text/javascript'></script>. And add a reference to jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
and put your scripts inside $(document).ready().
I think you really should take a look at this
Update
As you're using jquery you will need to add the scripts to your page, and all your jquery code must be inside $(document).ready(function(){ }), it will look like this.
<head>
<style>
p span {color:blue;}
</style>
</head>
<body>
<p>sony sensor 2.1mp</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p').html(function(index, value) {
return value.replace(/(\d+)/g, '<span>$1</span>');
});
})
</script>
</body>
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.
I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".
I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);
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