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;
    }
     
  2. namenotfound

    namenotfound

    Joined:
    Apr 30, 2005
    Messages:
    3,012
    Is there a specific reason why the entire thing in JavaScript?
     
  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.
     
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...
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.
    Dismiss Notice