1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Javascript help. ;O

Discussion in 'Web Design & Development' started by lumentec, Sep 21, 2008.

Thread Status:
Not open for further replies.
  1. lumentec

    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, Sep 21, 2008
    #1
  2. namenotfound

    namenotfound

    Joined:
    Apr 30, 2005
    Messages:
    3,012
    Is there a specific reason why the entire thing in JavaScript?
     
    namenotfound, Sep 21, 2008
    #2
  3. lumentec

    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.
     
    lumentec, Sep 21, 2008
    #3
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 733,556 other people just like you!

Loading...
Similar Threads - Javascript help
  1. darshit

    Print pyramid in following pattern in javascript

    darshit, Dec 13, 2018, in forum: Web Design & Development
    Replies:
    1
    Views:
    435
    colinsp
    Dec 14, 2018
  2. charlzguitarz

    help with coding

    charlzguitarz, Sep 5, 2019, in forum: Web Design & Development
    Replies:
    4
    Views:
    314
    JiminSA
    Oct 7, 2019
  3. noahd00

    Solved FTP Site Help Requested

    noahd00, Jul 29, 2019, in forum: Web Design & Development
    Replies:
    2
    Views:
    408
    noahd00
    Jul 29, 2019
  4. brandon.brown

    Need help Setting up HTML files to start up full screen on 2 monitors

    brandon.brown, Apr 19, 2019, in forum: Web Design & Development
    Replies:
    1
    Views:
    783
    JiminSA
    Apr 20, 2019
  5. Puzzledandconfused

    Editing site on development server and need help

    Puzzledandconfused, Apr 17, 2019, in forum: Web Design & Development
    Replies:
    6
    Views:
    718
    colinsp
    Apr 19, 2019
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/752057

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...
    Dismiss Notice