We Keep Coding

Javascript: navigate table inputs with arrow keys

I am working on an HTML grade book for a client. I am generating the gradebook with PHP, and then outputting a HTML table as seen in the example below. Each <td> contains a div with an <input> for the teacher to type in the student's score.
Here's what I'm trying to accomplish: how can I make it so the teacher can use the arrow keys on the keyboard to navigate inside of the gradebook? IE: The teacher should be able to click a cell, type in a grade, and then hit the left/right/up/down arrow key to move to the appropriate input and type in the next grade.
I have seen numerous examples on here about how to use javascript to accomplish this task in highlighting different <td> cells, but I cannot figure out how I would go about allowing the teacher to navigate inputs with her arrow keys. Any advice would be much appreciated.
body {
margin: 0;
position: absolute;
top: 105px; left: 0px;
width: 100%;
height: calc(100vh - 105px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"master"}
.master {
grid-area: master;
overflow-x: scroll;}
table {border-collapse: collapse}
th, td {
background-color: white;
max-width: 110px;
border: 1px solid lightgray;}
th {overflow: hidden;}
thead{
top: 0;
position: sticky;
z-index: 1;}
tr td:nth-child(1),
tr th:nth-child(1){
position: sticky;
left: 0;}
thead th.navigator { /* Top left cell with navigation controls */
padding: 10px;
z-index: 3;}
tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
white-space: nowrap;
max-width: fit-content !important;}
td input {
border: none;
outline: none;
text-align: center;
max-width: 80%;
font-size: 18px;
padding: 6px 0px;
cursor: cell;}
th select {
outline: none;
-webkit-appearance: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 8px;
width: 100%;
border: 1px solid lightgray}
tr:focus-within td:not(.gray) {background-color: #E9DCF9}
tr:focus-within td:not(.gray) input {background-color: #E9DCF9}
.due {
font-size: 11px;
color: darkgray;}
.assign {padding: 20px}
.assign span {
cursor: pointer;
font-size: 15px;
overflow: hidden;
color: #581F98}
.avg {padding: 10px}
.studentInfo {
display: flex;
align-items: center;
margin: 10px 12px 10px 6px;}
.studentInfo img {
width: 25px;
margin-right: 10px;
clip-path: circle();}
.red {background-color: red;}
.gray, .gray input {background-color: #F2F2F2;}
.score {
display: flex;
justify-content: center;
align-items: center;}
<table>
<thead>
<tr>
<th class='navigator' colspan='2' rowspan='4'>
<form method='GET'>
<select name='subID' onchange='this.form.submit()'>
<option value='1' >Reading</option>
<option value='2' >Social Studies</option>
</select>
<select name='week' onchange='this.form.submit()' disabled>
<option value='all'>Entire Quarter</option>
</select>
</form>
</th>
<tr>
<th class='due'><span title='Monday'>10/11</span> to <span title='Wednesday'>10/13</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Monday'>10/18</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
</tr>
<tr>
<th class='assign'>
<span title='Assignment ID: 130' onclick='assignInfo("130");'>📚 Quiz</span>
</th>
<th class='assign'>
<span title='Assignment ID: 146' onclick='assignInfo("146");'>📚 Homework</span>
</th>
<th class='assign'>
<span title='Assignment ID: 145' onclick='assignInfo("145");'>💻 Test</span>
</th>
<th class='assign'>
<span title='Assignment ID: 147' onclick='assignInfo("147");'>✏️ Project</span>
</th>
</tr>
<tr>
<th class='avg gray'><span title='9.111/10'>91%</span></th>
<th class='avg gray'><span title='8.672/10'>87%</span></th>
<th class='avg gray'><span title='4.348/5'>87%</span></th>
<th class='avg gray'><span title='8.007/10'>80%</span></th>
</tr>
</thead>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 11'><img src='../../resources/pics/students/11.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='11' title='97.5/110'>89%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='11' data-workID='7282' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='11' data-workID='7340' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 12'><img src='../../resources/pics/students/12.jpg'></span>
<span>Jane Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='12' title='97.5/110'>69%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7250' data-curScore='6' value='6'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='12' data-workID='7211' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='12' data-workID='7110' data-curScore='4' value='4'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7233' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 13'><img src='../../resources/pics/students/13.jpg'></span>
<span>Sally Martin</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='13' title='97.5/110'>100%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='6250' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='13' data-workID='6211' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='13' data-workID='7610' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='7933' data-curScore='10' value='10'>
</div>
</td>
</tr>
</table>

It's not perfect but it should give you a place to start. You'll have to add some error handling and handle edge cases.
document.addEventListener( 'keydown', ( event ) => {
const currentInput = document.activeElement;
const currentTd = currentInput.parentNode.parentNode;
const currentTr = currentTd.parentNode;
const index = Array.from(currentTr.children).indexOf(currentTd);
switch (event.key) {
case "ArrowLeft":
// Left pressed
currentTd.previousElementSibling.getElementsByTagName('input')[0].focus();
break;
case "ArrowRight":
// Right pressed
currentTd.nextElementSibling.getElementsByTagName('input')[0].focus();
break;
case "ArrowUp":
// Up pressed
Array.from( currentTr.previousElementSibling.children )[index].getElementsByTagName('input')[0].focus();
break;
case "ArrowDown":
// Down pressed
Array.from( currentTr.nextElementSibling.children )[index].getElementsByTagName('input')[0].focus();
break;
}
} )
body {
margin: 0;
position: absolute;
top: 105px; left: 0px;
width: 100%;
height: calc(100vh - 105px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"master"}
.master {
grid-area: master;
overflow-x: scroll;}
table {border-collapse: collapse}
th, td {
background-color: white;
max-width: 110px;
border: 1px solid lightgray;}
th {overflow: hidden;}
thead{
top: 0;
position: sticky;
z-index: 1;}
tr td:nth-child(1),
tr th:nth-child(1){
position: sticky;
left: 0;}
thead th.navigator { /* Top left cell with navigation controls */
padding: 10px;
z-index: 3;}
tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
white-space: nowrap;
max-width: fit-content !important;}
td input {
border: none;
outline: none;
text-align: center;
max-width: 80%;
font-size: 18px;
padding: 6px 0px;
cursor: cell;}
th select {
outline: none;
-webkit-appearance: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 8px;
width: 100%;
border: 1px solid lightgray}
tr:focus-within td:not(.gray) {background-color: #E9DCF9}
tr:focus-within td:not(.gray) input {background-color: #E9DCF9}
.due {
font-size: 11px;
color: darkgray;}
.assign {padding: 20px}
.assign span {
cursor: pointer;
font-size: 15px;
overflow: hidden;
color: #581F98}
.avg {padding: 10px}
.studentInfo {
display: flex;
align-items: center;
margin: 10px 12px 10px 6px;}
.studentInfo img {
width: 25px;
margin-right: 10px;
clip-path: circle();}
.red {background-color: red;}
.gray, .gray input {background-color: #F2F2F2;}
.score {
display: flex;
justify-content: center;
align-items: center;}
<table>
<thead>
<tr>
<th class='navigator' colspan='2' rowspan='4'>
<form method='GET'>
<select name='subID' onchange='this.form.submit()'>
<option value='1' >Reading</option>
<option value='2' >Social Studies</option>
</select>
<select name='week' onchange='this.form.submit()' disabled>
<option value='all'>Entire Quarter</option>
</select>
</form>
</th>
<tr>
<th class='due'><span title='Monday'>10/11</span> to <span title='Wednesday'>10/13</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Monday'>10/18</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
</tr>
<tr>
<th class='assign'>
<span title='Assignment ID: 130' onclick='assignInfo("130");'>📚 Quiz</span>
</th>
<th class='assign'>
<span title='Assignment ID: 146' onclick='assignInfo("146");'>📚 Homework</span>
</th>
<th class='assign'>
<span title='Assignment ID: 145' onclick='assignInfo("145");'>💻 Test</span>
</th>
<th class='assign'>
<span title='Assignment ID: 147' onclick='assignInfo("147");'>✏️ Project</span>
</th>
</tr>
<tr>
<th class='avg gray'><span title='9.111/10'>91%</span></th>
<th class='avg gray'><span title='8.672/10'>87%</span></th>
<th class='avg gray'><span title='4.348/5'>87%</span></th>
<th class='avg gray'><span title='8.007/10'>80%</span></th>
</tr>
</thead>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 11'><img src='../../resources/pics/students/11.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='11' title='97.5/110'>89%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='11' data-workID='7282' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='11' data-workID='7340' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 12'><img src='../../resources/pics/students/12.jpg'></span>
<span>Jane Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='12' title='97.5/110'>69%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7250' data-curScore='6' value='6'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='12' data-workID='7211' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='12' data-workID='7110' data-curScore='4' value='4'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7233' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 13'><img src='../../resources/pics/students/13.jpg'></span>
<span>Sally Martin</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='13' title='97.5/110'>100%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='6250' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='13' data-workID='6211' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='13' data-workID='7610' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='7933' data-curScore='10' value='10'>
</div>
</td>
</tr>
</table>

I want to calculate all the totals using JQUERY by adding the CR and Subtracting DR Values

I have created a form that contains three fields. The second field consists of a debit or credit option which means the total should be calculated by that option.
If I select debit the total should be subtracted by the current value
I tried but I was getting only the totals without debit or credit
$(document).ready(function() {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
style="width:40%"
}
th,
td {
padding: 1px;
text-align: left;
}
.wrapper {
text-align: center;
}
.button {
position: absolute;
left: 400px;
background-color: #4CAF50;
border: 1px solid green;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
font-size: 20px;
cursor: pointer;
width: 150px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table style="width:60%">
<caption>Tally Ledgers</caption>
<tr>
<th width="60">Head</th>
<th width="5">DR/CR</th>
<th width="15">Amount</th>
</tr>
<tr>
<td><input class="tally" type="tally" id="tally" name="tally" placeholder="tally"></td>
<td>
<select id="cr_dr" name="cr_dr">
<option value="">Select Credit Or Debit</option>
<option value="+">CR</option>
<option value="-">DR</option>
</select>
</td>
<td width="15"><input class="txt" type="text" id="amount" name="amount" placeholder="Amount"></td>
</tr>
<tr>
<td><input class="tally1" type="tally1" id="tally1" name="tally1" placeholder="tally1"></td>
<td>
<select id="cr_dr1" name="cr_dr1">
<option value="">Select Credit Or Debit</option>
<option value="+">CR</option>
<option value="-">DR</option>
</select>
</td>
<td width="15"><input class="txt" type="text" id="amount1" name="amount1" placeholder="Amount1"></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Total :</td>
<td align="center"><output type="text" id="sum" name="sum" value="sum">0</output></td>
</tr>
</table>

I used the name beginning with cr_dr since they do not have a class
I changed output to an input field and change .text to .val for it based on your wish to submit it
<input type="text" id="sum" name="sum" value="0" />
$("#sum").val(sum.toFixed(2))
const calculateSum = function() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
let val = isNaN(this.value) || this.value.trim().length === 0 ? 0 : +this.value; // cast to number
const drcr = $(this).closest("tr").find("[name^=cr_dr]").val(); // name begins with cr_dr
sum += val * (drcr === "-" ? -1 : 1); // ternary based on the value
$(this).toggleClass("neg",drcr === "-"); // remove if you do not want this
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum")
.val(sum.toFixed(2))
.toggleClass("neg",sum<0); // remove if you do not want this
}
$(function() {
$(".txt").on("input", calculateSum);
$("select").on("change", calculateSum);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
style="width:40%"
}
th,
td {
padding: 1px;
text-align: left;
}
.wrapper {
text-align: center;
}
.button {
position: absolute;
left: 400px;
background-color: #4CAF50;
border: 1px solid green;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
font-size: 20px;
cursor: pointer;
width: 150px;
display: block;
}
.neg { color:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:60%">
<caption>Tally Ledgers</caption>
<tr>
<th width="60">Head</th>
<th width="5">DR/CR</th>
<th width="15">Amount</th>
</tr>
<tr>
<td><input class="tally" type="tally" id="tally" name="tally" placeholder="tally"></td>
<td>
<select id="cr_dr" name="cr_dr">
<option value="">Select Credit Or Debit</option>
<option value="+">CR</option>
<option value="-">DR</option>
</select>
</td>
<td width="15"><input class="txt" type="text" id="amount" name="amount" placeholder="Amount"></td>
</tr>
<tr>
<td><input class="tally1" type="tally1" id="tally1" name="tally1" placeholder="tally1"></td>
<td>
<select id="cr_dr1" name="cr_dr1">
<option value="">Select Credit Or Debit</option>
<option value="+">CR</option>
<option value="-">DR</option>
</select>
</td>
<td width="15"><input class="txt" type="text" id="amount1" name="amount1" placeholder="Amount1"></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Total :</td>
<td align="center"><input type="text" id="sum" name="sum" value="0" /></td>
</tr>
</table>

JQuery Ui .effect with CSS effect not working

This table's row with 2 elements.One type is text and the other type is hidden.
If these element's values were different.jQuery-Ui framework will do the highlight background-color (red).
$(function() {
$('table tr').each(function(i, val) {
var nprice = $(this).children('.unit-price').find("input[type='text']").val();
var oprice = $(this).children('.unit-price').find("input[type='hidden']").val();
console.log("nprice: " + nprice);
console.log("oprice: " + oprice);
if (nprice != oprice) {
console.log(i);
console.log("nprice: " + nprice + "!=" + "oprice: " + oprice);
var blink = setInterval(function() {
$('.cart tr:eq(' + i + ') ').effect('highlight', {
color: 'red'
}, 1000);
}, 1000);
setTimeout(function() {
clearInterval(blink);
}, 10000);
}
});
});
.highlight {
background: red;
color: green;
opacity: 0;
}
.unhighlight {
background: transparent;
color: black;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.cart th,
.data-table th,
.forum-table th {
border-width: 1px 1px 0;
border-style: solid;
border-color: #ddd;
background-color: #f6f6f6;
padding: 10px;
white-space: nowrap;
font-weight: normal;
}
.cart td {
min-width: 50px;
border-width: 1px;
border-style: solid;
border-color: transparent #ddd #ddd;
background-color: #fff;
padding: 20px;
color: #444;
}
.cart a {
font-weight: normal;
color: #4ab2f1;
}
.cart a:hover {
text-decoration: underline;
}
.cart .product {
min-width: 225px;
text-align: left;
}
.cart .product a {
font-weight: bold;
color: #444;
}
.cart .product a:hover {
color: #4ab2f1;
text-decoration: none;
}
.cart .product .edit-item {
margin: 10px 0 0;
}
.cart .product .edit-item a {
font-weight: normal;
color: #4ab2f1;
}
.cart .product .edit-item a:hover {
text-decoration: underline;
}
.cart .remove-from-cart,
.cart .add-to-cart {
text-align: center;
}
.cart td.unit-price {
white-space: nowrap;
}
.cart td.quantity input {
width: 50px;
text-align: center;
}
.cart td.subtotal {
white-space: nowrap;
color: #444;
}
.cart td.subtotal .discount,
.cart td.subtotal .discount-additional-info {
font-style: italic;
color: #4ab2f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
</td>
above with 2 values: 75 and 100
<<<highlight background-color was not working. Help. ``` <table class="cart">
<thead>
<tr>
<th>Id#</th>
<th>Session Eamil</th>
<th>Login Url</th>
<th>Date</th>
<th>Status</th>
<th>New Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">#counter11</td>
<td>#item.SessionEmail11</td>
<td>#item.LoginUrl11</td>
<td>#item.CreatedAt11</td>
<td>Failed11</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="120" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="100" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
</td>
</tr>
</tbody>
</table>
The function "effect" which highlight background-color effects not working. How can I modify the JavaScript code or CSS?

Try call with callback like below.
let i = 2; //I set i for demo purpose. Your i comes from loop, so no need to declare .
$('.cart tr:eq(' + i + ') ').effect('highlight', {
color: 'red'
}, 1000, callback);
function callback() {
setTimeout(function() {
$('.cart tr:eq(' + i + ') ').removeAttr("style").hide().fadeIn();
}, 1000);
};
.cart td {
min-width: 50px;
border-width: 1px;
border-style: solid;
border-color: transparent #ddd #ddd;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<table class="cart">
<thead>
<tr>
<th>Id#</th>
<th>Session Eamil</th>
<th>Login Url</th>
<th>Date</th>
<th>Status</th>
<th>New Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">#counter11</td>
<td>#item.SessionEmail11</td>
<td>#item.LoginUrl11</td>
<td>#item.CreatedAt11</td>
<td>Failed11</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="120" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="unit-price">
<input id="itemprice75" name="itemprice75" type="text" value="100" class="enter-price-input" />
<input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
</td>
</tr>
</tbody>
</table>

My Function that rolls basic values for abilities on a character sheet does not change anything

My top button is supposed to execute the roll() function which "rolls" the starting Ability Scores for the character (3d6 for each attribute). But instead of filling the inputs in the right hand table, It simply refreshes the page.
I tried moving the JS to an internal script on my HTML page, but I had the same issue, so I assume the issue is within my JavaScript code itself, but I can't seem to figure out why it doesn't work.
/*
* roll() takes dice and does base scores
* calculate() fills in ability modifiers
* ac() updates AC as armor bon and shield bon are changed
*/
function roll() {
First Base ability scores
var Strength = die(3, 6);
var Dexterity = die(3, 6);
var Constitution = die(3, 6);
var Intelligence = die(3, 6);
var Wisdom = die(3, 6);
var Charisma = die(3, 6);
document.getElementById("str").value = Strength;
document.getElementById("dex").value = Dexterity;
document.getElementById("con").value = Constitution;
document.getElementById("int").value = Intelligence;
document.getElementById("wis").value = Wisdom;
document.getElementById("cha").value = Charisma;
}
function die(times, sides) {
var total = 0;
for (int i = 0; i < times; i++) {
total += Math.floor(Math.random() * sides) + 1;
}
return total;
}
* {
border: solid 0px black;
}
body {
background-color: lightgray;
}
#wrapper {
background-color: gray;
margin-left: auto;
margin-right: auto;
width: 700px;
font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
text-align: center;
3 height: 700px;
}
#title {
text-align: center;
font-size: 2em;
font-family: Papyrus, fantasy;
}
form input {} input[type=text] {
width: 200px;
padding-left: 5px;
}
fieldset {
height: 600px;
}
label {
width: 200px;
text-align: left;
}
hr {
min-width: 450px;
size: 2px;
color: black;
}
#leftT {
position: relative;
height: 300px;
text-align: center;
float: left;
width: 400px;
}
#rightT {
position: relative;
height: 300px;
text-align: center;
float: right;
width: 200px;
}
#rightT table {
font-weight: bold;
margin: 0px;
}
#leftT table {
margin-left: 80px;
font-weight: bold;
}
#rightT input {
width: 3em;
margin-bottom: 0px;
margin-top: 2.5px;
font-weight: bold;
margin-left: 5px;
text-align: center;
}
#leftT input[type="calced"] {
width: 2em;
margin-bottom: 0px;
background-color: gray;
margin-top: 2.5px;
font-weight: bold;
}
td[id="ab"] {
width: 2em;
text-align: center;
}
#leftT input[type="armorbo"] {
width: 3em;
margin-bottom: 0px;
margin-top: 2.5px;
font-weight: bold;
margin-left: 5px;
}
#leftT p {
float: right;
margin: 0px;
}
td {} label {
margin-bottom: 10px;
}
input {
margin-bottom: 10px;
}
select {
margin-bottom: 10px;
}
button {
margin-top: 10px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
color: black;
background-color: #704420;
width: 100px;
height: 35px;
border: 3px groove #8b4500;
font-weight: bold;
}
button:active {
background-color: #8b4500;
border: 3px groove #704420;
}
<HTML>
<HEAD>
<TITLE>Pathfinder Char Gen</TITLE>
<link rel="stylesheet" type="text/css" href="charStyle.css" />
<script src="char.js"></script>
</HEAD>
<BODY>
<div id="wrapper">
<div id="title">Pathfinder : Character Creator</div>
<hr>
<form>
<fieldset>
<label for="playerName">Enter Player Name:</label>
<input type="text" id="playerName">
<br/>
<label for="charName">Enter Character Name:</label>
<input type="text" id="charName">
<br/>
<label for="class">Select Character Class:</label>
<select name="class" id="classes">
<option id="cleric">Cleric</option>
<option id="fighter">Fighter</option>
<option id="sorcerer">Sorcerer</option>
</select>
<label for="level">Select Level:</label>
<select name="level" id="cLevel">
<option id="one">1</option>
<option id="two">2</option>
<option id="three">3</option>
<option id="four">4</option>
<option id="five">5</option>
</select>
<br/>
<label for="align">Choose Your Alignment:</label>
<select name="align" id="alignment">
<option id="lawG">Lawful Good</option>
<option id="caoG">Chaotic Good</option>
<option id="neuG">Neutral Good</option>
<option id="neutral">True Neutral</option>
<option id="lawE">Lawful Evil</option>
<option id="caoE">Chaotic Evil</option>
<option id="neuE">Neutral Evil</option>
</select>
<br/>
<button id="rolls" onclick="roll()">Roll</button>
<br/>
<div id="leftT">
<table>
<tr>
<td>
<p>Fortitude:</p>
</td>
<td>
<input readonly type="calced" id="fortitude">
</td>
</tr>
<tr>
<td>
<p>Reflex:</p>
</td>
<td>
<input readonly type="calced" id="reflex">
</td>
</tr>
<tr>
<td>
<p>Will:</p>
</td>
<td>
<input readonly type="calced" id="will">
</td>
</tr>
<tr>
<td>
<p>HP:</p>
</td>
<td>
<input readonly type="calced" id="hp">
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Armor Bonus</td>
<td></td>
<td>Shield Bonus</td>
</tr>
<tr>
<td>
<p>AC:</p>
</td>
<td>
<input readonly type="calced" id="ac">
</td>
<td>
=
</td>
<td height="10px">
10
</td>
<td>
+
</td>
<td>
<input onchange="ac()" type="armorbo" id="ab">
</td>
<td>
+
</td>
<td>
<input onchange="ac()" type="armorbo" id="ab">
</td>
<td>
+
</td>
<td>
<input readonly type="calced" id="dexB">
</td>
</tr>
<tr>
<td>
<p style="margin-top:10px;margin-bottom:10px;">BAB:</p>
</td>
<td>
<input readonly type="calced" id="reflex">
</td>
</tr>
<tr>
<td>
<p style="margin-bottom:5px;">CMB:</p>
</td>
<td>
<input readonly type="calced" id="will">
</td>
</tr>
<tr>
<td>
<p>CMD:</p>
</td>
<td>
<input readonly type="calced" id="will">
</td>
</tr>
</table>
</div>
<div id="rightT">
<table>
<tr>
<td>
</td>
<td>
Score
</td>
<td id="ab">
Ability Mod.
</td>
</tr>
<tr>
<td>
STR
</td>
<td>
<input type="str" id="str">
</td>
<td>
<input type="strB" id="strB">
</td>
</tr>
<tr>
<td>
DEX
</td>
<td>
<input type="dex" id="dex">
</td>
<td>
<input type="dexB" id="dexB">
</td>
</tr>
<tr>
<td>
CON
</td>
<td>
<input type="con" id="con">
</td>
<td>
<input type="conB" id="conB">
</td>
</tr>
<tr>
<td>
INT
</td>
<td>
<input type="int" id="int">
</td>
<td>
<input type="intB" id="intB">
</td>
</tr>
<tr>
<td>
WIS
</td>
<td>
<input type="wis" id="wis">
</td>
<td>
<input type="wisB" id="wisB">
</td>
</tr>
<tr>
<td>
CHA
</td>
<td>
<input type="cha" id="cha">
</td>
<td>
<input type="chaB" id="chaB">
</td>
</tr>
</table>
</div>
<button id="calc" onclick="calculate()">Calculate</button>
</fieldset>
</form>
</div>
</BODY>
</HTML>
Please Help!

It turned out that I just had incorrect syntax in my for loop... I fixed it after looking closer at the console and doing some snooping.

Trying to create a calculator that display the previous typed number at the top

Windows calculator here. This is the full code of my calculator. i think the function is correct but i want to display the previous number i typed at the top of the current number i typed just as the default calculator running on windows.
<html>
<head></head>
<style>
input[type=button] {
color:white;
border:0;
display:block;
height:110px;
width: 90px;
font-family: Broadway;
font-size:200%;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 0 7px 11px 0;
transition: all 0.2s ease;
}
td{
background-color:;
}
input[type=text] {
color:black;
font-size:300%;
height:100px;
border-radius: 5px;
}
#calculator {
width: 425px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
p{
color:grey;
}
#clear{
height:2px;
width:2px;
background-color: red;
}
</style>
<body background="background.jpg">
<div style="background-color: " id=calculator>
<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
<table>
<tr>
<td colspan=4><input style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
</tr>
</table>
<br>
</center>
<center>
<table>
<tr>
<td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
<tr>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
</body>
</html>

You'll need to expand a bit on the calculator button functions in order to achieve this, but it's perfectly possibly without needing to delve into jQuery.
As mentioned, you'll need a "second screen" to keep the equation string in.
The following implements the functionality you're looking for, plus a few little bits to make it work as expected.
You should take care when using eval(), as it will literally execute any valid JavaScript code. More info: Is Javascript eval() so dangerous?
var endOfCalculation = false;
var els = document.getElementsByClassName('calc-button');
for(var i = 0;i < els.length;i++) {
els[i].addEventListener('click', function(e) {
var source = e.target || e.srcElement;
addToEquation(source.value);
}, false);
}
var clearEl = document.getElementById('clearButton');
clearEl.addEventListener('click', function() {
calc.display.value = '';
calc.displayTop.value = '';
});
var equalsEl = document.getElementById('calcEquals');
equalsEl.addEventListener('click', function() {
calc.displayTop.value += calc.display.value;
executeCalculation();
endOfCalculation = true;
});
function executeCalculation() {
calc.display.value = eval(calc.displayTop.value);
}
function addToEquation(char) {
if(endOfCalculation) {
calc.displayTop.value = '';
if(!isOperator(char)) {
calc.display.value = '';
calc.displayTop.value = '';
}
endOfCalculation = false;
}
calc.display.value += char;
if(isOperator(char)) {
calc.displayTop.value += calc.display.value;
calc.display.value = '';
}
}
function isOperator(char) {
return char === '+' || char === '-' || char === '*' || char === '/';
}
input[type=button] {
color:white;
border:0;
display:block;
height:110px;
width: 90px;
font-family: Broadway;
font-size:200%;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 0 7px 11px 0;
transition: all 0.2s ease;
}
td{
background-color:;
}
#topRow {
height: 50px;
padding-bottom:0;
}
input[type=text] {
color:black;
font-size:300%;
height:100px;
border-radius: 5px;
}
#calculator {
width: 425px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
p{
color:grey;
}
#clear{
height:2px;
width:2px;
background-color: red;
}
<body background="background.jpg">
<div style="background-color: " id=calculator>
<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h3>
<br/>
</center>
<center>
<form Name="calc">
<table>
<tr>
<td colspan=4><input id="topRow" style="background-color:#F0FFFF" type="text" size=12 Name="displayTop" readonly="true"></td>
</tr>
<tr>
<td colspan=4><input id="immediateRow" style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
</tr>
</table>
<br>
</center>
<center>
<table>
<tr>
<td><input style="height:50px; background-color:#F08080" type=button value="C" id="clearButton"></td>
</tr>
<tr>
<td><input type="button" value="1" class="calc-button"></td>
<td><input type="button" value="2" class="calc-button"></td>
<td><input type="button" value="3" class="calc-button"></td>
<td><input type="button" value="+" class="calc-button"></td>
</tr>
<tr>
<td><input type="button" value="4" class="calc-button"></td>
<td><input type="button" value="5" class="calc-button"></td>
<td><input type="button" value="6" class="calc-button"></td>
<td><input type="button" value="-" class="calc-button"></td>
</tr>
<tr>
<td><input type="button" value="7" class="calc-button"></td>
<td><input type="button" value="8" class="calc-button"></td>
<td><input type="button" value="9" class="calc-button"></td>
<td><input type="button" value="*" class="calc-button"></td>
</tr>
<tr>
<td><input type="button" value="0" class="calc-button"></td>
<td><input type="button" value="." class="calc-button"></td>
<td><input type="button" value="=" id="calcEquals"></td>
<td><input type="button" value="/" class="calc-button"></td>
</tr>
</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
jsFiddle: http://jsfiddle.net/sysnull/ufyp6qdk/

You can achieve this by adding a second "display".
Each time you click on a button, instead of just updating the first display, you can update both like this:
input[type=button] {
color:black;
border:0;
display:block;
height:110px;
width: 90px;
font-family: Broadway;
font-size:200%;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 0 7px 11px 0;
transition: all 0.2s ease;
}
td{
background-color:;
}
input[type=text] {
color:black;
font-size:300%;
height:100px;
border-radius: 5px;
}
#calculator {
width: 425px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
p{
color:grey;
}
#clear{
height:2px;
width:2px;
background-color: red;
}
<div style="background-color: " id=calculator>
<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
<table>
<tr>
<td colspan=4>
<input style="background-color:#F0FFFF" type="text" size=12 Name="displayAll" readonly="true">
<input style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
</tr>
</table>
<br>
</center>
<center>
<table>
<tr>
<td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value='';calc.displayAll.value='' "></td>
</tr>
<tr>
<td><input type=button value="1" OnClick="calc.display.value+='1'; calc.displayAll.value+='1';"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'; calc.displayAll.value+='2';"></td>
<td><input type=button value="3" OnClick="calc.display.value+='3'; calc.displayAll.value+='3';"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'; calc.displayAll.value+='+';"></td>
</tr>
<tr>
<td><input type=button value="4" OnClick="calc.display.value+='4'; calc.displayAll.value+='4';"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'; calc.displayAll.value+='5';"></td>
<td><input type=button value="6" OnClick="calc.display.value+='6'; calc.displayAll.value+='6';"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'; calc.displayAll.value+='-';"></td>
</tr>
<tr>
<td><input type=button value="7" OnClick="calc.display.value+='7'; calc.displayAll.value+='7';"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'; calc.displayAll.value+='8';"></td>
<td><input type=button value="9" OnClick="calc.display.value+='9'; calc.displayAll.value+='9';"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'; calc.displayAll.value+='*';"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'; calc.displayAll.value+='0';"></td>
<td><input type=button value="." OnClick="calc.display.value+='.'; calc.displayAll.value+='.';"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value); calc.displayAll.value+='='+eval(calc.display.value);"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/';calc.displayAll.value+='/';"></td>
</tr>
</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
Another way to approach this type of task is to create a single function to do the work for you and each time you click a button, have that function decide what to do. You can see an example of that here: https://jsfiddle.net/f4gz4uub/1/