In the following code I simply want the number of matched element by tag name, But it returns 0 and it alerts while page load (not on click as I want). Cannot find any mistake over an hour
<!DOCTYPE HTML>
<HTML>
<head>
<script language="javascript">
document.getElementById("all").onclick = alert( document.getElementsByTagName("a").length);
</script>
</head>
<body>
<div id="all" class="a">Click</div>
<div class="a"></div>
<div class="a"></div>
</body>
</HTML>
I'm a total newbie in JavaScript
A couple of problems. The first one is pointed by #Ian in his comment on your question and the second one is you are calling getElementsByTagName("a") when in your code you do not have any <a> tags. You need to call getElementsByClassName("a") instead.
document.getElementById("all").onclick = function() {
alert( document.getElementsByClassName("a").length);
}
Update:
After Ian's comment, double checked jsfiddle and found that it had onLoad selected. So here is the corrected code with window.onload and updated jsfiddle:
window.onload = function() {
document.getElementById("all").onclick = function() {
alert( document.getElementsByClassName("a").length);
};
};
Here is the jsfiddle of this.
You are running the JS before even DOM is loaded. That means element all does not exist in the DOM when JS is running. Write like below, and that is the way to do.
var attachEve = function(){
document.getElementById("all").onclick = function() {
alert( document.getElementsByClassName("a").length);
}
}
window.onload = attachEve;
It should work!. Without window.onload works in jsfiddle because jsfiddle runs the JS in window.onload context.
Related
I am trying to grab an element (a button) and add an event listener on it.
Whenever I run
var button = document.getElementById('clickMe');
console.log(button); // null
I checked that my javascript file is loading and checked that everything is case sensitive. Here is my html and JS Files:
HTML:
<!doctype html>
<html>
<head>
<script src="js/timer.js"></script>
</head>
<body>
<button id='clickMe' type='button'>Hello</button>
</body>
</html>
JS
var button = document.getElementById('clickMe');
console.log(button);
function buttonClicked () {
alert('the button was clicked');
}
button.addEventListener('click', buttonClicked);
function timerComplete () {
alert('timer complete');
}
setTimeout(timerComplete, 2000);
The most common errors I have found was camel casing getelementbyid which I did.
Does anyone know why I keep getting null? Is it trying to grab the element before it is loaded?
Your Javascript code is executed before the Button is added to the DOM. You could change your HTML to this:
<!doctype html>
<html>
<body>
<button id='clickMe' type='button'>Hello</button>
<script src="js/timer.js"></script>
</body>
</html>
Or even better, if you don't mind making your JS code a bit more complex you could wait for your dom elements to be loaded before executing that part of the code:
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('clickMe');
console.log(button);
});
If you use this JS you can put back your script tag back to the head
I'm trying to get the entire HTML of a page, but it seems that the text stops after </head>. The following code is essentially how I tested this. What am I doing incorrectly here?
<html>
<head>
<script>
document.onload = showHTML();
function showHTML() {
html = document.documentElement.innerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
Okay here is a complete working answer... after checking already posted answer I realized it didn't work for multiple reasons..
First you need to put a function in the onload event. The onload event is written without uppercases.
Also! you need to put the event on the window object as such:
window.onload = showHTML;
Here is a fiddle. Notice on the left that it isn't wrapped inside onload. It's unwrapped in head like your code should be.
http://jsfiddle.net/4zsGH/2/
You should have something like this:
<html>
<head>
<script>
window.onload = showHTML;
function showHTML() {
var html = document.documentElement.outerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
Take off the parenthesis from document.onLoad = showHTML();
What's happening is showHTML() is being called right away, before the rest of the document is being loaded. Taking off the parenthesis means the function is being set to the onLoad callback.
Try:
<html>
<head>
<script>
document.onload = showHTML;
function showHTML() {
var html = document.documentElement.outerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
When you wrote document.onLoad = showHTML(); you didn't assign the reference to showHTML function to document.onLoad but you assigned the value returned by that function i.e. undefined (because you called it). I also changed innerHTML to outerHTML.
Also document.onload shouldn't be written in camel case.
Writing var html = … isn't essential but it wouldn't run in strict mode. Without it you create a html property on global object window implicitly.
I think this is what you are looking for:
document.onLoad = showHTML();
function showHTML() {
var html = document.documentElement.innerHTML;
alert(html);
}
http://jsfiddle.net/skhan/4zsGH/
I have a code that works in JSFiddle but doesn't work when I save the HTML+JS locally and test it locally. I can't figure out what's wrong with the code. Here is my JSFiddle
http://jsfiddle.net/LLUAB/
And here is the actual code, not very long
<!doctype html>
<html>
<head>
<script type="text/javascript" language="Javascript">
function Composer(foobox) {
this.foobox = document.getElementById(foobox);
this.foobox.onkeydown = function(){window.alert("hello")};
}
var myComposer = new Composer("foo");
</script>
</head>
<body>
<textarea id="foo"></textarea>
</body>
</html>
Because in JSFiddle your script is placed inside window.onLoad event handler by default. While in your case getElementById() method is unable to find not yet loaded element.
Put all your script right before closing </body> tag and it will work:
<script type="text/javascript">
// ...
</script>
</body>
It works in Fiddle because of onLoad option specified here. The problem is that when new Composer line is fired, there's no such element in the DOM yet. Wrap this line in DOMReady handler - or move its invokation to the end of <body> element.
It's because your dom is not ready yet
function Composer(foobox) {
this.foobox = document.getElementById(foobox);
alert(this.foobox); --Prints null
this.foobox.onkeydown = function(){window.alert("hello")};
}
Working code here. http://jsfiddle.net/LLUAB/1/
I have tried, as many have suggested, saving a variable as the .value or .innerHTML of an ID, found by using document.getElementById. Here is all of my HTML:
<html>
<head>
<title>write</title>
<script type="text/javascript" src="g.js"></script>
<link rel="stylesheet" type="text/css" href="g.css" />
</head>
<body>
<div id="box">
<textarea id="txt" placeholder="placeholder. type here.">text text</textarea>
</div>
</body>
</html>
and here is my javascript, currently meant to fire an alert that contains the text in the text area – right now that would be, text text:
function run(){
var txt = document.getElementById('txt');
alert(txt);}
run()
Right now, loading the page fires an alert with the text Null and adding .value after getElementById('txt') results in no alert. Many thanks in advance.
The problem is that your javascript is executing before the DOM is constructed. When you load the JavaScript file in the <head> of the document, it is executed immediately, before the <textarea> tag has been created.
Try moving your script block below the textarea, just before the </body> tag.
Here's an example: fiddle
After the DOM is constructed you can use getElementById just as have and can access the contents of the textarea with the value attribute. All of this is in the fiddle above.
Alternatively, you can wrap your run() method call with a library that provides an event when the DOM becomes ready. jQuery's example would be:
$(function () {
// code you want to execute when the DOM is ready.
run();
});
function run() {
var txt = document.getElementById("txt").value;
alert(txt);
}
$(document).ready(function(){
run();
});
check this jsfiddle link
You are not getting textarea value because your javscript function is getting executed before there's value in DOM
or using javascript
function run(){
var txt = document.getElementById("txt").value;
alert(txt);
}
window.onload = run();
More about window.onload
The javascript below works in firefox. In fact, if you click the answer button for this question, you can try it out in firebug on this very page...
var textArea = document.getElementById("wmd-input"); // #wmd-input is the text input where your answer goes...
alert( textArea.value );
Make sure you enter some text first, of course.
While you're at it, you should give jQuery a try:
alert( $("#wmd-input").val() );
Or better yet,
console.log($("#wmd-input").val());
Hope that helps.
So the question is, why doesn't this append the div's on load? I'm scratching my head on this one. No errors... Just not loading.
<head>
<script type="text/javascript">
function load() {
var divTag0 = document.createElement("div");
divTag0.className = "newsBlock";
divTag0.innerHTML = " Try this..";
document.getElementById("newsLeft").appendChild(divTag0);
var divTag1 = document.createElement("div");
divTag1.className = "newsBlock";
divTag1.innerHTML = " Blah..";
document.getElementById("newsRight").appendChild(divTag1);
var divTag2 = document.createElement("div");
divTag2.className = "newsBlock";
divTag2.innerHTML = " And this ..";
document.getElementById("newsLeft").appendChild(divTag2);
}
</script>
</head>
<body>
<p> Something filler </p>
<div id="newsLeft">
</div>
<div id="newsRight">
</div>
<script type="text/javascript">
window.onload="load()";
</script>
</body>
You are supposed to supply a string to getElementById ...
So that:
document.getElementById(newsLeft).appendChild(divTag0);
Should be:
document.getElementById("newsLeft").appendChild(divTag0);
But the main problem is:
window.onload="load()";
Which should be:
window.onload=load;
Thanks to jvillars for the fiddle, which helped me notice this.
If azhrei's answer doesn't work, the only thing I could think of would be that calling onload after it has loaded might not trigger, you can change this from your example by simply calling load();
I tested it here
Hope this helps
EDIT:
I believe azhrei has the right of it, it's not so much that the onload isn't triggering, it's that there's a syntax problem with your onload call.
But this code can also be improved in terms of better style (more readable/ easier to comprehend) by removing the second JS call.
In the header if you write:
window.onload = function() {
//everything inside your load() function goes here
}
It works just as well. It also removes a lot of the fluff that was just kind of there. I hope that helps.