Javascript help. ;O

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

lumentec

Thread Starter
Joined
Mar 23, 2008
Messages
103
Look at this example. Notice how wide the table is. If I added anymore items to the table, it would become so wide you'd have to scroll over.
If you'll look in the HTML for the page... you'll notice I tried to fix it by adding an if() statements similar to the following...

Code:
            temp = number+1;
            if (temp%4==0){
                       document.getElementById("item").innerHTML= html + '</tr><tr>';
}
This SHOULD add a new row to the table. However, it doesn't. It does nothing at all.

Some help?


Here's the HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Inventory</title>
<link rel="StyleSheet" href="http://www.frsdf.com/game/css/inventory_style.css" type="text/css">
<script type="text/javascript">
var items = ""
 ,item = ""
 ,number = 0
 ,temp = 0
 ,html = "";
 
function display_items(){
	items = document.getElementById("items").innerHTML;
	if (items)
		get_item_html()
	else
		document.getElementById("items").innerHTML = "You have no items in your inventory!";
		// DISPLAY THE REST OF THE HTML PAGE HERE. IF YOU HAVE NO ITEMS THIS WILL FINISH BUILDING THE PAGE.
}

function show_description(num){
		 document.getElementById("num").style.visibility=visible;
	}
	

function get_item_html(){
	item = items.split(",");
	if (item[number] == 1) {
		document.getElementById("item").innerHTML = html + '<td class="item"><fieldset><legend>Boring sword.</legend><center><img src="http://www.frsdf.com/game/img/item_1.png" alt="A very boring sword." class="item"></center><br />Level Req: 1<br/>Att: +1<br/>Def: N/A<br /><center><a href="Javascript:void(0)" onClick="show_description(1)">Description</a></center></fieldset></td>';
		html = document.getElementById("item").innerHTML;
                temp=number+1;
                if (temp%4==0){
                document.getElementById("item").innerHTML = html + '</tr><tr>';
                html = document.getElementById("item").innerHTML;
        }
                else{}
		number++;
		get_item_html();
	}
	else if (item[number] == 2){
		document.getElementById("item").innerHTML = html + '<td class="item"><fieldset><legend>Boring Shield.</legend><center><img src="http://www.frsdf.com/game/img/item_2.png" alt="An incredibly boring shield." class="item"></center><br />Level Req: 1<br/>Att: N/A<br/>Def: +1<br /><center><a href="Javascript:void(0)" onClick="show_description(1)">Description</a></center></fieldset></td>';
		html = document.getElementById("item").innerHTML;
                temp=number+1;
                if (temp%4==0){
                document.getElementById("item").innerHTML = html + '</tr><tr>';
                html = document.getElementById("item").innerHTML;
        }
                else{}
		number++;
		get_item_html();
	}
	else{
               document.getElementById("items").innerHTML="";

		// DISPLAY THE CODE FOR THE REST OF THE HTML PAGE HERE. ONCE ALL ITEMS ARE ADDED THE END OF THE PAGE WILL BE ADDED.
}
}

</script>
</head>
<body onLoad="display_items()"><center> <!-- 
Use PHP to get the value of the items in inventory (6,25,4,3,2,28,6).
--> 
<table bgcolor="#D3D3D3" class="item">
<tr id="item">

</tr>
</table>
<p id="items">
1,2,2,1,1,1,2
</p>
</center>
</body>
</html>


And the CSS:
HTML:
table.item{
border-style: solid;
border-thickness: 2px 2px 2px 2px;
border-color: blue;
}

img.item {
border-style: solid;
border-thickness: 1px 1px 1px 1px;
}

table.description {
visibility: hidden;
position: fixed;
z-index: 2;
top: -50;
left: -50;
width: 150px;
}
 

lumentec

Thread Starter
Joined
Mar 23, 2008
Messages
103
The page displays an inventory of items which is retrieved by taking a string of numbers from a MySQL Database that looks something like this... 1,2,6,3,1 and splitting it into an array (each number represents an item ID). I then check each item in the array against a list of if else statements and display HTML accordingly.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Members online

Top