Table with onclick

i am trying to do a onclick function for my table but it’s not working i have no clue why
Weapons and Defense was supposed to work like buttons to change the table content but it doesn’t work :/
and the content of both Weapons and Defense are shown together
Can u guys give me a hand? thanks

here is my full code: https://jsfiddle.net/yorig/braj7sLf/9/

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        
        
        <link rel="stylesheet" href="/assets/css/mixbasic.css" type="text/css">
        
    </head>
    
    <body>      
        <div id="body">
            <div id="top_box">
                <span class="links_box">
                    <a onclick="Weapons">Weapons</a> |
                    <a onclick="Defense">Defense</a> 
                    
                </span>
            </div>
        
            
            <div id="info_box"></div>
            
            <div id="defense">
            <table id="mix_list_table" cellspacing="1" cellpadding="0">

                <colgroup>
                    <col>
                    <col>
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                </colgroup>

                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>
                <tr id="mix1" class="row0" onmouseover="this.className='row_hl';" onmouseout="this.className='row0';" onclick="infoBox(1);">
                    <td style="text-align: left;">Transparo Critical Mix</td>
                    <td style="text-align: left;">MinAP(+3) MaxAP(+4) Crit(+1)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr id="mix2" class="row1" onmouseover="this.className='row_hl';" onmouseout="this.className='row1';" onclick="infoBox(2);">
                    <td style="text-align: left;">Murky Dexterity Mix</td>
                    <td style="text-align: left;">MaxAP(+6) AR(+45) HP(+10)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>4</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>

            </table>
        </div>
        </div>
        
        <div id="weapons">
            <table id="mix_list_table" cellspacing="1" cellpadding="0">

                <colgroup>
                    <col>
                    <col>
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                </colgroup>

                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>
                <tr id="mix1" class="row0" onmouseover="this.className='row_hl';" onmouseout="this.className='row0';" onclick="infoBox(1);">
                    <td style="text-align: left;">Transparo Critical Mix</td>
                    <td style="text-align: left;">MinAP(+3) MaxAP(+4) Crit(+1)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr id="mix2" class="row1" onmouseover="this.className='row_hl';" onmouseout="this.className='row1';" onclick="infoBox(2);">
                    <td style="text-align: left;">Murky Dexterity Mix</td>
                    <td style="text-align: left;">MaxAP(+6) AR(+45) HP(+10)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>4</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>

            </table>
        </div>
        </div>




    </body>
</html>

script

var node = document.getElementById('mix'+id);
    var allNodes = node.getElementsByTagName('td');
    var sheltoms = new Array(
            "Lucidy",
            "Sereneo", 
            "Fadeo", 
            "Sparky", 
            "Raident", 
            "Transparo", 
            "Murky", 
            "Devine", 
            "Celesto", 
            "Mirage", 
            "Inferna", 
            "Enigma", 
            "Bellum", 
            "Oredo",
            "Sapphire",
            "Sol");
    
    var text = "";
    for (var i=0; i<16; i++)
    {
        var s = 2 + i;
            
        if(allNodes[s] != null && allNodes[s].innerHTML && allNodes[s].innerHTML.length > 0)
        {
            text = text + allNodes[s].innerHTML 
                + ' x <img src="images/sheltoms/' 
                + sheltoms[i].toLowerCase() + '.gif" class="box_sheltom_img" alt="' + sheltoms[i] + '"><br>\n';
        }
    }
    
    var infoBox = document.getElementById('info_box');
    
    var name = allNodes[0].innerHTML;
    var effect = allNodes[1].innerHTML;
    
    infoBox.innerHTML = '<div class="box_header"><span class="box_close" onclick="document.getElementById(\'info_box\').style.display=\'none\';">Close</span>Mix Info</div>\n<div class="box_content">'
        + '<b>Name:</b><br>' 
        + name + '<br><br><b>Effect:</b><br>' 
        + effect + '<br><br><b>Sheltoms:</b><br>' 
        + text + '</div>';
    infoBox.style.display = 'block';
    
    
    

}
document.getElementById("weapons").style.display = 'block';
document.getElementById("defense").style.display = 'none';

        
function showCategory(s)
{
    if( s.innerHTML == 'Weapons' )
    {
        document.getElementById("weapons").style.display = 'block';
        document.getElementById("defense").style.display = 'none';

    }
    else if( s.innerHTML == 'Defense' )
    {
        document.getElementById("weapons").style.display = 'none';
        document.getElementById("defense").style.display = 'block';
    }

}

css

#body
{
    /* width: 920px; */
    border: 1px solid #3B2517;
    margin: auto;
    text-align: left; /* IE */
    padding: 5px;
    
    background: #554231 url(/images/background.jpg) repeat-x scroll 0px -0px;
}

#top_box
{
    text-align: center;
    margin-bottom: 20px;
    margin-top: 5px;
}

.links_box
{
    background-color: #3B2517;
    color: #D0B77A;
    font-weight: bold;
    padding: 0.3em 0.6em 0.3em 0.6em;
    height: 1.2em;
    border: 1px solid #3B2517;
    margin-top: 10px;
}
.selected_link
{
    border-bottom: 2px solid #D0B77A;
}

.links_box a:link,
.links_box a:visited,
.links_box a:active
{
    color: #D0B77A;
    font-weight: bold;
    text-decoration: none; 
}

.links_box a:hover
{
    color: #FFF8D9;
}


h1
{
    margin-top: 0.5em;
    margin-bottom: 0.8em;
    font-size: 2.2em;
    font-weight: normal;
}

hr
{
    border: 0px; /* Firefox und Opera */
    border-top: solid 1px #000000;
    border-bottom: solid 1px #E5DAC9; /* IE */
}

table
{
    border-width: 0; 
    border-color: #000000; 
     
    font-size: 1em;
}

td, th
{
    padding: 0.2em 0.4em 0.2em 0.4em;
    vertical-align: top;
    line-height: 1.2em;
}

a:link
{
    text-decoration: none; 
    color: #34271C;
    font-weight: bold;
}
a:visited
{
    text-decoration: none; 
    color: #34271C;
    font-weight: bold;
}
a:hover
{
    text-decoration: underline; 
    color: #633822;
    font-weight: bold;
}
a:active
{
    text-decoration: none; 
    color: #34271C;
    font-weight: bold;
}

.row0
{
    background-color: #F4EBDE;
}

.row1
{
    background-color: #E5DAC9;
}

.row_hl
{
    background-color: #C2AD87;
    color: #000000;
}

#mix_list_table
{
    width: 100%;
    text-align: center;
    border: 1px solid #3B2517;
    font-size: 0.9em;
    background-color: #3B2517;
    table-layout: fixed;
}

#mix_list_table td
{
    line-height: 1.5em;
    cursor: pointer;
}

.table_header
{
    font-weight: bold;
    background-color: #3B2517;
    color: #D0B77A;
}

.table_header td
{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    vertical-align: middle;
    cursor: default !important;
}

#info_box
{
    display: none;
    width: 450px;
    background-color: #E5DAC9;
    position: fixed;
    left: 50%;
    top: 25%;
    margin-left: -225px;
    border: 1px solid #000000;
    padding: 1px;
    line-height: 1.5em;
}

.box_header
{
    font-weight: bold;
    background-color: #3B2517;
    color: #D0B77A;
    padding: 2px 5px 2px 5px;
}

.box_content
{
    padding: 5px;
}

.box_sheltom_img
{
    position: relative;
    top: 6px;
    margin: 2px 0px 2px 0px;
}

.box_close
{
    float: right;
    cursor: pointer;
}

181 thoughts on “Table with onclick”

  1. I simply could not go away your site before suggesting that I extremely enjoyed the standard information an individual
    supply for your visitors? Is going to be again ceaselessly to
    investigate cross-check new posts

    Reply
  2. hello!,I really like your writing very much! proportion we be in contact extra about your
    article on AOL? I need a specialist on this space to unravel my problem.
    Maybe that’s you! Taking a look forward to look you.

    Reply
  3. Thanks for one’s marvelous posting! I seriously enjoyed reading it, you will be a great author.I will make
    sure to bookmark your blog and will come back very soon. I
    want to encourage you to definitely continue your great job, have a nice morning!

    Reply
  4. Howdy! I know this is somewhat off topic but I was wondering if you knew where I could get
    a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding
    one? Thanks a lot!

    Reply
  5. Can I just say what a relief to find an individual who
    genuinely knows what they’re talking about online.
    You certainly know how to bring an issue to light and make it important.
    More people need to read this and understand this side of
    the story. It’s surprising you aren’t more popular because
    you surely have the gift. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply
  6. I enjoy you because of your entire labor on this website. My mom loves carrying out investigation and it is obvious why. We learn all regarding the dynamic mode you create informative guidance by means of your blog and foster contribution from website visitors on that concern then our favorite daughter has always been understanding a whole lot. Enjoy the rest of the new year. You’re the one performing a wonderful job. blog

    Reply

Leave a Comment