<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script>
function onetwothree() {
var girl = ["Ariana Grande", "Melanie Iglesias", "Kate Upton", "Vanessa Hudgens", "Miley Cyrus", "Jennifer Aniston", "Hannah Montana"];
for (i = 0; i < girl.length; i++) {
var girlOfDay = girl[i];
var id = "w" + i;
var li = getElementById(id);
li.innerHTML = girlOfDay;
}
}
window.onload = onetwothree;
</script>
</head>
<body>
<ul>
<li id="w0"></li>
<li id="w1"></li>
<li id="w2"></li>
<li id="w3"></li>
<li id="w4"></li>
<li id="w5"></li>
<li id="w6"></li>
</ul>
</body>
</html>
Why isnt this working its only displaying the bullet points and not the names? Im new to this i did an example like this in a a book, it worked then i tried to come up with my own and its not working
This line:
var li=getElementById(id);
Should say this:
var li=document.getElementById(id);
When troubleshooting problems like this, always use the JavaScript console available in the development tools of all modern browsers. For example, with your original code, Chrome reports the following error:
Uncaught ReferenceError: getElementById is not defined [test.html:13]
You had 2 problems:
getElementById is not the correct way to call, document.getElementById is correct
you weren't actually calling your function window.onload=onetwothree; does not work, window.onload=onetwothree(); does work
working fiddle: http://jsfiddle.net/den23/
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I am a beginner in Javascript. I am doing some exercises and coming across the error listed above for the 'onclick'.
I have looked at other questions on this forum and it has not be helpful for me. I have looked over syntax numerous times in both my html and JS and can't find anything!
var item1;
var item2;
var item3;
document.getElementById("changeList").onclick = newList;
function newList() {
item1 = prompt("Enter a new first thing:");
item2 = prompt("Enter a new second thing:");
item3 = prompt("Enter a new third thing:");
updateList();
}
function updateList() {
document.getElementById("firstThing").innerHTML = item1;
document.getElementById("secondThing").innerHTML = item2;
document.getElementById("thirdThing").innerHTML = item3;
}
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Practice</title>
<script src="main.js"></script>
</head>
<body>
<h1 id="myName">Angie</h1>
<hr>
<p id="aboutMe"><em>I am trying to learn this damn javascript and stick with it.</em></p>
<h2>Things I like</h2>
<p>Here are some of the things I like to do:</p>
<ul>
<li id=firstThing>Dance</li>
<li id=secondThing>Write</li>
<li id=thirdThing>Travel</li>
</ul>
<button id="changeList" type="button">Change Your List</button>
</body>
</html>
You can try placing your script tag at the bottom of the page as suggested by lealceldeiro or you can wait for the DOM to load fully before adding your event listener for onclick like so:
//Replace this line
document.getElementById("changeList").onclick = newList;
//With the following, this fires an event when the DOM has fully loaded
//This will ensure your element has been rendered into the DOM
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("changeList").onclick = newList;
});
Try changing your html line to :
<button id="changeList" type="button" onclick = newList();>Change Your List</button>
and remove this line from your JS
document.getElementById("changeList").onclick = newList;
Okay So this is the code. When I run it. It just has the h1 tag and 3 subparts. It doesn't take value from getElementByID function and assigns it to respective id.
<!Doctype html>
<html>
<head>
<title>My Playlsit</title>
<meta charset="utf-8">
<script>
function addsongs() {
var song1 = document.getElementById('song1');
var song2 = document.getElementById('song2');
var song3 = document.getElementById('song3');
song1.innerHTML = "Blue Suede Strings, By Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I code the Line,by Johnny Javascripts"
}
window.onload = "addsongs";
</script>
</head>
<body>
<h1>My awesome Playlist</h1>
<ul id="playlist">
<li id = "song1"</li>
<li id= "song2"</li>
<li id = "song3"</li>
</ul>
</body>
</html>
You have missed the > symbol of starting li element.
Also function cannot be assigned as string value. Remove the quotes.
window.onload = addsongs;
Im using basic html and javascript, and it doesnt work in any of my browsers or other computers. I get TypeError: document.getElementById(...) is null.
It works when I use the dev tools/console though. I cannot find anything wrong with what im writing, so I tried a few different ways and all fail with the same error.
<!doctyp html>
<html>
<head>
<title>Simple JSON</title>
<script type="text/javascript">
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
</script>
</head>
<body>
<ul id="links">
</ul>
</body>
</html>
The problem is your javascript is in the head element and is executed before the actual elements in the body are ready. Put it in an event that is called when the content is ready
document.addEventListener("DOMContentLoaded", function(event) {
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
});
Your script is running before the page has finished loading, so at the time of execution, your element with the ID links doesnt exist yet. Move the script to the bottom of the page and it should work fine.
<html>
<head>
<title>Simple JSON</title>
</head>
<body>
<ul id="links">
</ul>
<script type="text/javascript">
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
</script>
</body>
</html>
Try putting your <script> tag at the bottom of the body. The reason why you get null error is because at the time your javascript code executes <ul> tag has not been initialized yet.
HTML is an interpreted language. You need to put your JavaScript code after the closure of the <ul> markup or more generally before </body>
Can someone please help me how to loop my function ?
here is my code i just want that my will execute more times than only one.
I have already tried to create my own for loop, but it doesnt work.
Hope someone is so friendly to help me out with my problem and can give little bit explain about how to get rid of my problem with loops.
<html>
<head>
<script type="text/javascript">
for (var i = 1; i<=4; i++){
windows.open(i);
}
function MultiplyLinks(){
window.open("#")
window.open("#")
window.open("#")
}
</script>
<title>Javascript MultiplyLinks Opener</title>
</head>
<body>
<a h ref ="javascript:MultiplyLinks()">Open More links</a>
</body>
</html>
Well guys thanks . I 've got the problem.
i have used windows.open(i);
but it has to be MultiplyLinks(i);
otherwise it will never recognize my function.
i just wanted that my 3 links will executed more times and that works for now.
Thanks for all the replies.
Few issues:
1) you've got a typos
change
windows.open(i)
to
window.open(i)
2) Why are you trying to open i rather than use a url?
suggest you change i to something more meaningful like:
window.open('http://someusr');
3) you have a space in the anchor tag :
change
<a h ref=
to
<a href=
so the final code:
<html>
<head>
<script type="text/javascript">
for (var i = 1; i<=4; i++){
window.open('http://www.stackoverflow.com');
}
function MultiplyLinks(){
window.open("#")
window.open("#")
window.open("#")
}
</script>
<title>Javascript MultiplyLinks Opener</title>
</head>
<body>
Open More links
</body>
</html>
var links = [
'http://jquery.com',
'http://stackoverflow.com/',
'https://bitbucket.org',
'https://github.com'
];
for (var i = 0; i < links.length; i++){
window.open( links[i] );
}
I am somewhat new to programming and have been working through the Head First HTML5 Programming book. On page 65, they have an exercise that helps you insert a javascript function into the HTML head that will change the text located at bullet points in the body of the page. When I open the HTML file in the browser, the page loads, but the content from the Javascript function isn't added to the bullet points. I have determined it's because the script is running before the DOM is complete because when I change the book's code to <body onload="addSongs()">, the page loads correctly.
Here's the code from the book (that doesn't seem to work):
<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
window.onload = addSongs;
}
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>
I have read through different posts and many people suggested using JQuery (which I'm hoping to learn in the next few months), but I'm just curious as to whether the window.onload = function; has been deprecated since this book was published or if I am making a mistake somewhere. A lot of the exercises in this book use this principle and I can't move forward until I figure this out. Any suggestions or different approaches are appreciated.
Thanks!
You need to move the line:
window.onload = addSongs;
To outside the function.
"I have determined it's because the script is running before the DOM is complete"
The script is running, but all it does is declare a function, it doesn't ever call it (because the aforementioned line is in the wrong place).
it's just a typo.
you put window.onload = addSong; in the definition of the function addSong. so window.onload will never be set, as addSong will never be called.
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs; //move this line out of function definition.
You need to move window.onload = addSongs; after define the function, not before it.
like this:
<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs;
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>