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:

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.

Code:

<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

Code:

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

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

Code:

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

This works (all changes are highlighted

Code:

<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:

Code:

<!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>

Thread: document.getElementById

Thread Tools

Search Thread

document.getElementById

Bookmarks

Bookmarks

Posting Permissions