We Keep Coding

Jacascript wont continue

I want to do when I press a button, the script will change my HTML code to make it another page, but when I press another button after it the buttons don't working and doing nothing...
At the first click each button work and do his job, the second click non of the buttons work and all the script just stop working.
HTML:
<div id="innerHTML">
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>
<script src="js/members.js"></script>
JS:
let print = document.getElementById("innerHTML");
let btnOrg = document.getElementById("orgBtn");
let btnWhy = document.getElementById("whyBtn");
let btnJoin = document.getElementById("joinBtn");
btnOrg.addEventListener('click', function(){
let printOrg = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
`;
print.innerHTML = printOrg;
})
btnWhy.addEventListener('click', function(){
let printWhy = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl btnOn" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
print.innerHTML = printWhy;
})
btnJoin.addEventListener('click', function(){
let printJoin = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
print.innerHTML = printJoin;
})

Hi,
here the problem is when you set innerHtml = your new html the let btnOrg = document.getElementById("orgBtn"); are now returning nothing, they point to an element of the page that has been deleted and not to an id,
here is the solution:
<div id="innerHTML">
<table align="center" >
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr id="joinTable" style="display: none;"></tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
<tr id="whyTable" style="display: none;"></trid>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
<tr id="orgTable" style="display: table;"></tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>
JS:
let btnOrg = document.getElementById("orgBtn");
let orgTable = document.getElementById("orgTable");
let btnWhy = document.getElementById("whyBtn");
let whyTable = document.getElementById("whyTable");
let btnJoin = document.getElementById("joinBtn");
let joinTable = document.getElementById("joinTable");
btnOrg.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "table"
whyTable.style.display = "none"
joinTable.style.display = "none"
})
btnWhy.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "table"
joinTable.style.display = "none"
})
btnJoin.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "none"
joinTable.style.display = "table"
})
i changed the code you now in the HTML there is a "header" like part and the buttons are never deleted thats the content who change !

Attach the event to the body then on click check the id
document.body.addEventListener('click', e => {
if (e.target.nodeName == "BUTTON" && !e.target.id) return
let theId = e.target.id;
if (theId == "orgBtn")
print.innerHTML = printOrg
else if (theId == "whyBtn")
print.innerHTML = printWhy
else if (theId == "whyBtn")
print.innerHTML = printJoin
})
let print = document.getElementById("innerHTML");
let printOrg = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
`;
let printWhy = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl btnOn" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
let printJoin = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
<div id="innerHTML">
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>

How can I call function in HTML file for checkbox?

As a default, the checkbox is already checked but the tables are not hidden. As a default, the first two table shall be demonstrated. When you click on a few times, you can see hidden tables but they should be hidden as default checked. The problem is when I copy paste in https://codepen.io/ which is working because js directly calling the function. When you copy paste this code inside a html file, it is not working. How can I call function to get the result?
<html>
<head>
<script language="JavaScript">
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
show('box');
</script>
</head>
<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
</table>
</html>

I broke your js out into a separate file for ease of reading. Then i made the following tweaks:
add an id to your checkbox. this eliminates the need to check your element in a loop when there is only 1 of them and since its a checkbox there should always only be 1 with that name
pull the tables in by class name as you were and then convert the node collection to an array. then leverage the array builtin forEach loop.
lastly use a ternary if statement to set your table display for some syntactic sugar.
function showMe(cls) {
const checkbox = document.getElementById("c1"),
tables = Array.prototype.slice.call(document.getElementsByClassName(cls));
tables.forEach(function (t) {
t.style.display = checkbox.checked ? 'table' : 'none';
});
}
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" id="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>

Add the JS at the end of file, this is doesn't work, because you return the JS before HTML. You need render HTML before JS, and change show('box'); to showME('box');
<html>
<head></head>
<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3">
<b>Event</b>
</td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3">
<b>Status</b>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
</table>
<script language="JavaScript">
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
showMe('box');
</script>
</html>

First you try to call the function show('box'); which does not exist. You should rename the call to showMe('box');
The second problem is the order of execution. Basically everything that is loaded is executed immediately. In your case, the first thing that is defined is the function showMe(). After that it is called immediately (see above). The problem that occurs now is that the HTML element that the function is supposed to access has not yet been rendered.
So the initial call of the function showMe('box') should be done after the HTML elements are rendered. You can do this by making the call at the end of the page in separate script tags or in the body tag in the onload method.
<body onload="showResults('box')">
...
</body>
Basically, you should use meaningful variable and function names (for example, "resultVisible" instead of "vis" or "showResults" instead of "showMe") and use them with the correct type, e.g. Boolean (true / false).
I would add an ID to the checkbox instead of a name. Since you only have one of them, you can save yourself a lot of scripting to determine whether the checkbox is set or not. You can also shorten the part where you control the visibility.
function showResults(cls) {
var checked = document.getElementById('c1').checked;
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
e.style.display = (checked) ? 'table' : 'none';
}
}

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>

The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

SimpleCart JS shelfItem in table?

How would I be able to make the "Add to Cart" work if I were to put the simple_cart ShelfItem in table?
I'm still cannot find a way to make this work.
I'm using the eshopper template, which have the section id with cart items and so on. But if I were to put the simplecart javascript in the , , and so on, when I press the add to cart it won't work. Somebody please teach me how to use this, thanks.
Sorry I counldt find the answer or I dont know how to do it.
Edit: Add cart is working now I guess? At least able to make the "quantity" to increase, or able to empty the cart, but now the price is not updating, what did I do wrong?
http://imgur.com/HBhRv1S
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Shopping Cart</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Item</td>
<td class="description">Description</td>
<td class="price">Price</td>
<td class="quantity">Quantity</td>
<td class="total">SubTotal</td>
</tr>
</thead>
<tbody>
<div class="simpleCart_shelfItem">
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/511SkrkMNCL.jpg" alt="Star Wars Character Encyclopedia" class="item_thumb" thumb="Images (Books)/Images/thumb/511SkrkMNCL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars Character Encyclopedia</h4>
</td>
<td class="cart_price">
<span class="item_price">$35.99</span><br />
</td>
<td class="cart_quantity">
+
<p> <input type="text" value="1" class="item_Quantity"/> <br>
-
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81rH-DQqQOL.jpg" alt="Percy Jackson and the Olympians 5 Book " class="item_thumb" thumb="Images (Books)/Images/thumb/81rH-DQqQOL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Percy Jackson and the Olympians 5 Book </h4>
</td>
<td class="cart_price">
<span class="item_price">$80.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51mGJ4PmMzL.jpg" alt="Star Wars: The Jedi Path" class="item_thumb" thumb="Images (Books)/Images/thumb/51mGJ4PmMzL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: The Jedi Path</h4>
</td>
<td class="cart_price">
<span class="item_price">$30.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81cm6ZST7tL.jpg" alt="The Return of Nagash (The End Times)" class="item_thumb" thumb="Images (Books)/Images/thumb/81cm6ZST7tL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">The Return of Nagash (The End Times)</h4>
</td>
<td class="cart_price">
<span class="item_price">$50.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51m3gTdOteL.jpg" alt="Star Wars: Darth Vader and the Ghost Prison" class="item_thumb" thumb="Images (Books)/Images/thumb/51m3gTdOteL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: Darth Vader and the Ghost Prison</h4>
</td>
<td class="cart_price">
<span class="item_price">$65.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->

Working for me here : http://62.210.240.67/hank/HNKmobile/
I'd have post a comment but apparently I need 50 pts of reputation... (not sure to understand this behaviour)

Asp page not running in firefox or chrome

I have a classic asp page which is working on IE and safari but not in firefox or chrome. Have a look at this url
Check it
My Asp Page code is
<HTML>
<HEAD>
<TITLE>USER LOGIN</TITLE>
<script language="JavaScript">
<!--
function SetFocus() {
var field = document.forms("Form1").item("txtUserID");
field.select();
field.focus();
}
//-->
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
.v8Blue{ font-family:Verdana; font-size:8pt; color:#1E3B51;}
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table width="75%" border="0" align="center">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td align="center">
<%
' Check if User has previously rejected by the Server for invalid Log On
If Session("RequestLogOnSuccess_Delphi") = "NO" then
Response.Write "<table width='100%' border='0' cellspacing='0' cellpadding='0'>"
Response.Write "<tr>"
Response.Write "<td align='center'><font face='Arial, Verdana, Times New Roman' size='2' color='#CC0000'>YOUR LOG ON IS INVALID. PLEASE TRY AGAIN.</font></td>"
Response.Write "</tr>"
Response.Write "</table>"
else
Response.Write "<p> </p>"
End if
%>
</td>
</tr>
</table>
<form method="post" action="../Request_WebProcess/Request_LogOn_Process.asp" name="Form1">
<table width=23% border=0 cellpadding=0 cellspacing=0 align="center" height="119">
<tr>
<td colspan=7> <img src="images/login_01.jpg" width=370 height=58 alt=""></td>
</tr>
<tr>
<td width="35" rowspan=4> <img src="images/login_03.jpg" width=35 height=83 alt=""></td>
<td colspan=2>
<div align="center">
<input name="txtUserID" type="text" class="v8blue" id="username" size="15">
</div>
</td>
<td width="12" rowspan=2> <img src="images/login_05.jpg" width=12 height=27 alt=""></td>
<td colspan=2>
<div align="center">
<input name="txtPassword" type="password" class="v8blue" id="password" size="15">
</div>
</td>
<td width="64" rowspan=4> <img src="images/login_07.jpg" width=54 height=83 alt=""></td>
</tr>
<tr>
<td colspan=2> <img src="images/login_08.jpg" width=133 height=4 alt=""></td>
<td colspan=2> <img src="images/login_09.jpg" width=136 height=4 alt=""></td>
</tr>
<tr>
<td width="100" rowspan=2> <img src="images/login_10.jpg" width=100 height=56 alt=""></td>
<td colspan=3> <img src="images/login_11.jpg" name="Image19" width="82" height="30" border="0" onClick="document.forms('Form1').submit()"></td>
<td width="99" rowspan=2> <img src="images/login_12.jpg" width=99 height=55 alt=""></td>
</tr>
<tr>
<td colspan=3 height="21"> <img src="images/login_13.jpg" width=82 height=26 alt=""></td>
</tr>
<tr>
<td colspan=7 height="2"> <img src="images/login_14.jpg" width=370 height=20 alt=""></td>
</tr>
<tr>
<td colspan=7> </td>
</tr>
<tr>
<td width="35"> <img src="images/spacer.gif" width=35 height=1 alt=""></td>
<td width="100"> <img src="images/spacer.gif" width=100 height=1 alt=""></td>
<td width="33"> <img src="images/spacer.gif" width=33 height=1 alt=""></td>
<td width="12"> <img src="images/spacer.gif" width=12 height=1 alt=""></td>
<td width="38"> <img src="images/spacer.gif" width=37 height=1 alt=""></td>
<td width="99"> <img src="images/spacer.gif" width=99 height=1 alt=""></td>
<td width="64"> <img src="images/spacer.gif" width=54 height=1 alt=""></td>
</tr>
</table>
<table width="70%" border="0" align="center">
<tr align="center">
<td width="51%" height="12"> </td>
<td width="49%" height="12"> </td>
</tr>
<tr align="center">
<td colspan="2"><img src="../Delphi_Logo.gif" width="397" height="77"></td>
</tr>
<tr align="center">
<td colspan="2"><font face="Arial, Helvetica, sans-serif" size="4"><font face="Georgia, Times New Roman, Times, serif"><font face="Arial, Helvetica, sans-serif" size="4"><font face="Georgia, Times New Roman, Times, serif"><font color="#CC9933" size="5"><font size="4" color="#000000" face="Arial, Helvetica, sans-serif">SINGAPORE
INTERNET PURCHASE</font></font></font></font></font></font></td>
</tr>
</table>
<table width="63%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr align="center">
<td><font face="Arial, Helvetica, sans-serif" size="4"><i><font face="Arial, Helvetica, sans-serif" color="#993333" size="2">(Please
log in your user name and password ) </font><font face="Georgia, Times New Roman, Times, serif" color="#993333"></font></i></font></td>
</tr>
<tr align="center">
<td> </td>
</tr>
<tr align="center">
<td><font face="Arial, Helvetica, sans-serif" size="2"><a href="ForgetPassword.asp">CLICK
HERE IF YOU FORGET YOUR PASSWORD</a></font></td>
</tr>
<tr align="center">
<td> </td>
</tr>
<tr align="center">
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="97">
<tr>
<td height="70"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</BODY>
</HTML>

Did you check the browser's console? This is the error that Chrome reports:
Uncaught TypeError: Property 'forms' of object #<HTMLDocument> is not a function
Change this line:
var field = document.forms("Form1").item("txtUserID");
to be:
var field = document.forms["Form1"]["txtUserID"];
// or
var field = document.forms.Form1.txtUserID;
Or I would probably do this:
var field = document.getElementById("username");

I have got the solution
Changed
<td colspan=3> <img src="images/login_11.jpg" name="Image19" width="82" height="30" border="0" onClick="document.forms('Form1').submit()"></td>
To
<td colspan=3> <img src="images/login_11.jpg" name="Image19" width="82" height="30" border="0" onClick="document.forms[0].submit()"></td>