PDA

View Full Version : document.getElementById



locbtran
05-27-2012, 10:19 PM
I'm trying convert document.write to document.getElementById
but it is not working and I can't seem to figure it out.


This is my original code:

var myurl = new Array("google.com", "yahoo.com");

for (i=0;i<=myurl.length-1;i++){
document.write("<a href='http://www." + myurl[i] + " target='_blank'>"+ myurl[i]+"</a>");
}

I would like to convert to document.getElementById but it doesn't work.


<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<script type="text/javascript">

var myurl = new Array("google.com", "yahoo.com");

document.getElementById('info').innerHTML = "<table border=1><tr><td>";

for (i=0;i<=myurl.length-1;i++){
document.getElementById('info').innerHTML += "<tr><td><a href='http://www." + myurl[i] + " target='_blank'>"+ myurl[i]+"</a></tr></td>";
}
document.getElementById('info').innerHTML = "</tr></td></table>";
</script>
</HEAD>

<BODY>


<p id="info"></p>

</BODY>
</HTML>

keyboard
05-27-2012, 11:00 PM
Couple of small problems...

Your web browser interprets the code in order, so you're trying to assign a value to the <p> tag before it exists.

Also, you were missing a ' and


document.getElementById('info').innerHTML = "</tr></td></table>";

is simply writing over the contents of the <p> tag. Should be


document.getElementById('info').innerHTML += "</tr></td></table>";

This works (all changes are highlighted


<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<script type="text/javascript">
function runOnLoad() {
var myurl = new Array("google.com", "yahoo.com");
document.getElementById('info').innerHTML = "<table border='1'><tr><td>";
for (i=0;i<=myurl.length-1;i++){
document.getElementById('info').innerHTML += "<tr><td><a href='http://www."+myurl[i]+"' target='_blank'>"+myurl[i]+"</a></tr></td> ";
}
document.getElementById('info').innerHTML += "</tr></td></table>";
}
</script>
</HEAD>
<BODY onload="runOnLoad()">
<p id="info"></p>
</BODY>
</HTML>

One quick note -
Some of your html tags are capitals, some aren't. Use either one or the other, not both (I suggest lowercase).

Hope this helps!
Keyboard1333

ApacheTech
05-28-2012, 06:37 AM
A good way to learn best practices when coding is to pass your pages through The W3C Markup Validation Service (http://validator.w3.org/). Whilst strictly, this is not regulation or law; W3C is an industry recognised standard and should be adhered to unless specific circumstances prevent it.

The service will tell you what is wrong with your code and where the bad code is, via filename and line number. Don't worry if you can't iron out all the kinks and get it perfect; that will come with time. And the larger the site, the more errors it will bring back. Facebook for example has on average over 100 errors per page when resolved through The W3C Markup Validation Service.

It's a very useful tool nonetheless.

keyboard
05-28-2012, 07:33 AM
Oh and two other suggestions.

If you aren't already, use an editor with text-highlighting (notepad++ for example). This will help pick up little mistakes like this.

Also, in IE (not sure how many other browsers have something like this) you can use developer tools to debug code. This will tell you the error and what line it is on. Very help full to pick up little mistakes.

ApacheTech
05-28-2012, 07:56 AM
The best tool for that is Firebug in Firefox. Goto Tools->Addons and search for it from there. It's much better than the inbuilt one. Also Greasemonkey is another essential Firefox Addon. Add your own javascript to any website.

jscheuer1
05-28-2012, 09:10 AM
It's not wise to write a block level element like a table into a p element. The p element is unique in that it's a block level element that self terminates the moment an opening tag for another block level element is encountered. I'd use div for this. And you have to wait until after the browser has parsed the target element (info) before you can write to it. And it's best to accumulate the entire block of HTML code you want before writing it to the target element in case the browser gets any bright ideas about terminating your new elements for you before their terminating tags show up. And you cannot put a tr tag inside a td tag. I think that and some of the other comments in this thread by others about covers it:


<!DOCTYPE html>
<html>
<head>
<title>Make a Table of Links - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<div id="info"></div>

<script type="text/javascript">
var myurl = ['google.com', 'yahoo.com'], resultHTML = '<table border=1><tbody>', i = 0;
for (i; i < myurl.length; ++i){
resultHTML += '<tr><td><a href="http://www.' + myurl[i] + '/" target="_blank">' + myurl[i] + '</a></tr></td>';
}
resultHTML += '</tbody></table>';
document.getElementById('info').innerHTML = resultHTML;
</script>
</body>
</html>