My code is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Inventory-Tags</title>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
/* Appearance */
body, table { font-family: sans-serif; }
table { border-collapse: collapse; }
td, th { padding: 6px; }
th { background: #333; color: white; }
tbody tr:nth-child(odd) { background: #dfdfdf; }
table { border: 1px solid red; }
/* Scrollability of table */
table { width: 610px; } /* fixed width table */
thead tr { display: block; } /* makes it sizeable */
tbody {
display: block; /* makes it sizeable */
height: 262px; /* height of scrollable area */
overflow: auto; /* scroll rather than overflow */
width: 100%; /* fill the box */
}
thead th { width: 197px; } /* fixed width for THs */
tbody td { width: 185px; } /* fixed width for TDs */
</style>
</head>
<body>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: 40px"
document.getElementById("table2").style ="position:absolute; top: -9999px"
}
</script>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
}
</script>
<a onclick="function(Move)">Hi</a>
<div style="left: 40px">
<a onclick="function(Move2)">Hi2</a>
</div>
<div id="table1"; style="position: absolute; top: 40px">
<h1><div id=user_name>'s Inventory- Tags</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>(the Halfbaked)</td><td>It looks kinda... under-cooked</td><td>R2</td></tr>
<tr><td>(Ninja)</td><td>Hiding in the night, you approach.</td><td>R6</td></tr>
<tr><td>(the Foul)</td><td>Foresee the future.</td><td>R7</td></tr>
<tr><td>(the Master)</td><td>Make le gold.</td><td>R6</td></tr>
<tr><td>(the Photographer)</td><td>Where's the camera?</td><td>R5</td></tr>
<tr><td>(the Canonical)</td><td>We all ship it.</td><td>R5</td></tr>
<tr><td>(the Punching Bag)</td><td>Looks like that hurt.</td><td>R3</td></tr>
<tr><td>(the Fancy)</td><td>I swear, if you start singing that song...</td><td>R5</td></tr>
<tr><td>(the Knight)</td><td>You live by the code of chivalry.</td><td>R6</td></tr>
<tr><td>(the Samurai)</td><td>Your enemy is the ninja.</td><td>R6</td></tr>
<tr><td>(the Loser)</td><td>You're not a winner.</td><td>R2</td></tr>
<tr><td>(the Outlaw)</td><td>You done somethin' bad, son.</td><td>Unique</td></tr>
<tr><td>(the Lord)</td><td>We bow to you humbly.</td><td>R9</td></tr>
<tr><td>(the Fugitive)</td><td>Always running, always hiding.</td><td>Unique</td></tr>
<tr><td>(the Egg)</td><td>Yes, that's right. An egg.</td><td>R4</td></tr>
</tbody>
</table>
</div>
<div id="table2"; style="position: absolute; top: -9999px">
<h1><div id=user_name>'s Inventory- Specials</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>/slap</td><td>Allows you to slap any player for up to 15 damage.</td><td>R8</td> </tr>
<tr><td>/heal</td><td>Allows you to automatically heal yourself.</td><td>R9</td></tr>
<tr><td>/buildmode</td><td>Grants immunity to damage and permanent lighting; meant for use during building.</td><td>R9</td></tr>
<tr><td>/buff</td><td>Allows you to give yourself buffs.</td><td>R4</td></tr>
<tr><td>/invasion</td><td>Allows you to start an invasion.</td><td>R8</td></tr>
<tr><td>/gbuff</td><td>Allows you to give buffs to all players.</td><td>R9</td></tr>
<tr><td>/spawnmob</td><td>Allows you to spawn in any mob.</td><td>R9</td></tr>
<tr><td>/command1</td><td>Allows you to use /command1.</td><td>R8</td></tr>
<tr><td>/command2</td><td>Allows you to use /command2.</td><td>R8</td></tr>
<tr><td>HouseName</td><td>Gives ownership to HouseName.</td><td>House</td></tr>
<tr><td>HouseName2</td><td>Gives ownership to HouseName2.</td><td>House</td></tr>
</tbody>
</table>
</div>
</body>
</html>
From my code, I'm sure you can see what I want. I want to be able to click on my 'a' divs. When they click on 'Hi' the first table goes to the visible area, and the second table goes away. When you click on 'Hi2' the first table goes away, and the second table goes to the visual area. I know that onclick won't work with <style>, so I tried using the ParseInt method, but that will continue to move. Note that I will have four tables in my full code, and four buttons. I don't make it so that if you click 'Hi,' and then 'Hi3,' you have to click 'Hi2' or 'Hi4' to display their respective tables.
In short, I want to be able to click a button, or an <a>, and move the four tables to my own specified coordinates, without using <style>.
To answer to fixing your problem is to understand the use of basic javascript. You cannot change an elements style like this
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
Each different style change has to be set individually. Like this.
document.getElementById("table1").style.top = "-9999px"; //also don't forget the semicolon
When you are setting multiple styles on an element, it is best to set the element as a variable and setting a style to this variable each time.
var elem = document.getElementById("table1");
elem.style.position = "absolute";
elem.style.top = "-9999px";
MOST styles can be placed after the elem.style.top using their normal style name such as top, height, color, etc.. Except z-index which can be defined as zIndex