Any ideas why this code doesn't work?
<html><head>
<script type="text/javascript">
document.onDOMContentLoaded=function(){
alert('aaaaaaaaaaaaaa');
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
onDOMContentLoaded is expected to triogger when the webpage is loaded and make that alert but it doesn't work dunno why
You should be binding to the event with addEventListener:
document.addEventListener("DOMContentLoaded", function() {
alert('aaaaaaaaaaaaaa');
});
http://jsfiddle.net/qHa4T/1
Keep in mind that both addEventListener and DOMContentLoaded won't work with IE8 and below.
Related
I have written a small program to pop up an alert on click of a button using an addEventListener() . PFB the code below:
html file
<html>
<head>
<title>name alert</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input id="p" type="button" value="alert">
</body>
</html>
javascript file
document.getElementById("p").addEventListener("click",greet,true);
function greet(){
alert("hello there !");
}
I dont get a pop up screen this way both the files are in the same folder btw.
test.js loads and executes before the DOM is loaded. So, at that point #p returns null. Try listening to onload event, and add click event.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("p").addEventListener("click",greet,true);
});
// global scope
function greet(){
alert("hello there !");
}
<input id="p" type="button" value="alert">
try to move your
<script type="text/javascript" src="test.js"></script>
just before
</body>
You need to put the addEventListener inside a function that is called on the load event. As the page is being created it will run the javascript as it comes to it. If it hasn't created the HTML yet, when the addEventListener runs it won't find the 'p' element and it will give you an error.
You can also move the javascript to be after the html, but it's more organized to put it in something like this:
<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)
function pageload()
{
document.getElementById("p").addEventListener("click",greet,true);
}
</script>
I ran the below code and tried it on all browsers but it didn't work
//HTML Code
<html>
<head><title>Test</title></head>
<body onload="LaunchImageSlider();">
<script type="text/javascript" src="Scripts/javascript code.js"></script>
</body>
</html>
//javascript code.js
function LaunchImageSlider() {
window.addEventListener("load",function() {alert("Hi")});
}
I did not get any alert message. My actual aim is to create an image slider once the page is loaded so I began first by seeing whether the "addEventListener" works.
What am I doing wrong here?
I referred to the below questions already, but nothing helped:
addEventListener is not working
addEventListener() not working
addEventListener not working
addEventListener in javascript
A possible solution:
<html>
<head>
<title>Test</title></head>
<body>
<script type="text/javascript" src="Scripts/javascript code.js"></script>
<script type="text/javascript">
(function () {
LaunchImageSlider();
})();
</script>
</body>
</html>
But in the function you should not add and eventListener, as it is run after the window has loaded. You should just run the callback method directly. So using your example:
//javascript code.js
function LaunchImageSlider() {
alert("Hi");
}
This is the code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
When I click the button, I don't get the alert window, so I think is a problem with the DOM tree, How can I resolve this...?
Thank's advance!
Or... You're not including jquery...
EDIT: Sarcasm aside, include the JQuery library before your code to be able to use it.
https://developers.google.com/speed/libraries/devguide
Here's an example of how it should looks... It works fine.
http://jsbin.com/osijok/1/edit
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
Pretty simple.
You don't have the JQuery library loaded on your page prior to executing methods from that library it looks like.
You need to import the jQuery JS Library to be able to use functions such as
$(document).ready(function(){ .. etc.
How can I resolve this...?
Use plain JavaScript
(function(){
document.getElementById("favorite").onclick = function() { alert('clicked'); }
}());
I really cannot understand why this does not work. I've tried couple of tricks but I just don't get it.
<html>
<head>
<script type="text/javascript">
alert('Hey');
var vText = document.getElementById("results");
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
</script>
</head>
<body>
<div id="results">
hey there
</div>
</body>
</html>
This is working as you can see here:
http://jsfiddle.net/gHbss/
It's important that you put the JavaScript after your HTML div container.
The problem that you're facing is that the browser runs the JavaScript as it's encountered when rendering/processing the page. At this point it will alert() your message, but the relevant element, the #results div isn't present in the DOM, so nothing can be changed.
To address this, you can either place the script at the end of the page, just before the closing </body> tag, or run the code in the onload event of the body or window.
The script has to be placed after the div#results or executed onload, otherwise the element is still unknown when you try to access it.
You need to call this script in onload event
i.e
window.onload=function(){
//your code
}
<html>
<head>
<script type="text/javascript">
function onloadCall()
{
alert('Hey');
var vText = document.getElementById("results");
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
}
</script>
</head>
<body onload="onloadCall()">
<div id="results">
hey there
</div>
</body>
</html>
Hope the above snippet shows you the fix
The following jQuery example should put some text into the div, but it doesn't. I tried Firefox, Google Chrome and Internet Explorer.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
$(window).load(function() {
$('adiv').html('<p>hello world</p>');
alert('done');
});
</script>
</head>
<body>
<div id="adiv">
</div>
</body>
</html>
Sorry, this might be stupid, but I'm stuck.
change $('adiv').html('<p>hello world</p>');to
$('#adiv').html('<p>hello world</p>');
You're not actually selecting anything in your select function
Directly after your $( opening, you need to use a CSS3 valid selector. Just a string won't select anything unless it's a HTML element (table, div, h2)
You need to preface it with a . or a # to signal either a class or ID name.
$('adiv') should be $('#adiv').
Unlike Prototype, in jQuery you specify a CSS selector, not just a string that is implicitly inferred to be an ID. I find myself forgetting this from time to time.
As e-turhan already mentioned you need # in front of adiv in your $() otherwise this is not a id selector. Also it's always better to call these .load() events inside the .ready() jQuery event whose famous shortcut is $(function() { //execute when DOM is ready }); . In your case:
$(function(){
$(window).load(
function(){
$('#adiv').html('<p>hello world</p>');
}
);
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script> <script language="javascript"> $(window).load(function() { $('#adiv').html('<p>hello world</p>'); alert('done'); }); </script> </head> <body> <div id="adiv"> </div> </body> </html>
Paste this code instead ur query
It Will Work
Try $(document).ready(function()... instead of $(window).load(function()...