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>
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>
I am trying to make a Killer Sudoku grid. This involves having jigsaw bold lines inside of regular 3x3 squares. I need to display a number and an operation at the top right of each cell. I have made a table with each cell as a textbox. I need to place some text in the top left corner which cannot disappear or be deleted. the font of this text should be small. I have tried inserting disabled buttons and background images but they all mess up the format of the table.
I know basic javascript html and css.
This is the image of my table.
var an=[1,6,2,3,5,4,2,4,3,1,6,5,5,1,4,6,3,2,4,2,6,5,1,3,3,5,1,4,2,6,6,3,5,2,4,1];
var i,k,e;
function show(b,a){
document.getElementById(b).style.display='block';
document.getElementById(a).style.display='none';
return false;
}
function sh(a,b,c,d,e){
document.getElementById(a).style.display='block';
document.getElementById(b).style.display='none';
document.getElementById(c).style.display='none';
document.getElementById(d).style.display='none';
document.getElementById(e).style.display='none';
return false;
}
function hide(b){
document.getElementById(b).style.display='none';
return false;
}
function check1(){
k=0;
var c=[];
for(i=1;i<37;i++){
a=document.getElementById("c1"+i).value;
c.push(a);
if(c[i-1]!=an[i-1])
k++;
}
ale(k);
}
function ale(k){
if(k==0)
alert("Right");
else
alert(k+" digits wrong");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
.button {
background-color: #78909c;
border: none;
color: white;
padding: 15px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submit{
margin-left: -63px;
height:30px;
width:60px;
font-size:10px;
background-color: transparent;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
table{
border: 2px solid #000000;
}
td{
border: 1px solid #000000;
text-align: center;
vertical-align: middle;
}
input{
color: transparent;
border:1px;
padding: 10px;
text-align: center;
width: 100px;
text-shadow: 0 0 0 black;
height: 100px;
font-size: 50px;
background-color: #FFFFFF;
outline: none;
}
input:focus {
background-color: #e0e0e0;
}
.id{
width:10px;
height:10px;
}
#c11,#c12,#c13,#c14,#c15,#c16{border-top:3px solid #000000;border-bottom:3px solid #000000;}
#c18,#c19,#c110,#c111,#c131,#c132,#c133,#c134,#c135,#c136{border-bottom:3px solid #000000;}
#c119,#c120,#c121,#c122,#c123,#c124,#c131,#c132,#c133,#c134,#c126,#c127,#c129,#c130{border-top:3px solid #000000;}
#c11,#c17,#c113,#c119,#c125,#c131,#c114,#c120,#c126,#c13,#c133,#c110,#c116,#c122,#c128{border-left:3px solid #000000;}
#c14,#c122,#c134,#c111,#c117,#c129,#c135,#c16,#c112,#c118,#c124,#c130,#c136{border-right:3px solid #000000;}
<head>
<div id="p1">
HOME<br>
<table style:"align: center;">
<center><strong>KILLER MYSTERY OPERATION<br><br><br></strong></center>
<tr>
<td>
<input type="text" id="c11">
</td>
<td>
<input type="text" id="c12">
</td>
<td>
<input type="text" id="c13">
</td>
<td>
<input type="text" id="c14">
</td>
<td>
<input type="text" id="c15">
</td>
<td>
<input type="text" id="c16">
</td>
</tr>
<tr>
<td>
<input type="text" id="c17">
</td>
<td>
<input type="text" id="c18">
</td>
<td>
<input type="text" id="c19">
</td>
<td>
<input type="text" id="c110">
</td>
<td>
<input type="text" id="c111">
</td>
<td>
<input type="text" id="c112">
</td>
</tr>
<tr>
<td>
<input type="text" id="c113">
</td>
<td>
<input type="text" id="c114">
</td>
<td>
<input type="text" id="c115">
</td>
<td>
<input type="text" id="c116">
</td>
<td>
<input type="text" id="c117">
</td>
<td>
<input type="text" id="c118">
</td>
</tr>
<tr>
<td>
<input type="text" id="c119">
</td>
<td>
<input type="text" id="c120">
</td>
<td>
<input type="text" id="c121">
</td>
<td>
<input type="text" id="c122">
</td>
<td>
<input type="text" id="c123">
</td>
<td>
<input type="text" id="c124">
</td>
</tr>
<tr>
<td>
<input type="text" id="c125">
</td>
<td>
<input type="text" id="c126">
</td>
<td>
<input type="text" id="c127">
</td>
<td>
<input type="text" id="c128">
</td>
<td>
<input type="text" id="c129">
</td>
<td>
<input type="text" id="c130">
</td>
</tr>
<tr>
<td>
<input type="text" id="c131">
</td>
<td>
<input type="text" id="c132">
</td>
<td>
<input type="text" id="c133">
</td>
<td>
<input type="text" id="c134">
</td>
<td>
<input type="text" id="c135">
</td>
<td>
<input type="text" id="c136">
</td>
</tr>
</table>
<div id="r1-1">
Show rules<br>
</div>
<div id="r1-2" style="display:none;">
Hide rules<br>
<ul style="list-style-type:disc">
<li>Fill the grid with number between 1 to 6. No numbers should be repeated in any row or column.</li>
<li>The number in each grid is the target number and the symbol is the operation to be used.</li>
<li>Obtain an expression for a#b in terms of a and b. "x" means multiplication.<br><ul style="list-style-type:disc">
<li>3 # 1 = (2) x (1)</li>
<li>4 # 2 = (2) x (2)</li>
<li>5 # 4 = (1) x (4)</li>
<li>6 # 1 = (5) x (1)</li>
</ul></li>
<li>"∆" is the inverse operation of "#".<br>Hint:<br>If a # b = c then c ∆ b = a.</li>
</ul>
</div>
<button class="button" id="5" onclick=check1()>Check</button>
</div>
</head>
This is my target.
Make the td relative, and keep an absolutely positioned span in it that has the small numbers;
Basically, add these 2 styles and keep an span(that has the small number) just before every input tag in td.
td {
position: relative;
}
td span {
position: absolute;
top: 5px;
left: 5px;
font-size: 14px;
}
var an = [1, 6, 2, 3, 5, 4, 2, 4, 3, 1, 6, 5, 5, 1, 4, 6, 3, 2, 4, 2, 6, 5, 1, 3, 3, 5, 1, 4, 2, 6, 6, 3, 5, 2, 4, 1];
var i, k, e;
function show(b, a) {
document.getElementById(b).style.display = 'block';
document.getElementById(a).style.display = 'none';
return false;
}
function sh(a, b, c, d, e) {
document.getElementById(a).style.display = 'block';
document.getElementById(b).style.display = 'none';
document.getElementById(c).style.display = 'none';
document.getElementById(d).style.display = 'none';
document.getElementById(e).style.display = 'none';
return false;
}
function hide(b) {
document.getElementById(b).style.display = 'none';
return false;
}
function check1() {
k = 0;
var c = [];
for (i = 1; i < 37; i++) {
a = document.getElementById("c1" + i).value;
c.push(a);
if (c[i - 1] != an[i - 1])
k++;
}
ale(k);
}
function ale(k) {
if (k == 0)
alert("Right");
else
alert(k + " digits wrong");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><style>.button {
background-color: #78909c;
border: none;
color: white;
padding: 15px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submit {
margin-left: -63px;
height: 30px;
width: 60px;
font-size: 10px;
background-color: transparent;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
table {
border: 2px solid #000000;
}
td {
border: 1px solid #000000;
text-align: center;
vertical-align: middle;
}
input {
color: transparent;
border: 1px;
padding: 10px;
text-align: center;
width: 100px;
text-shadow: 0 0 0 black;
height: 100px;
font-size: 50px;
background-color: #FFFFFF;
outline: none;
}
input:focus {
background-color: #e0e0e0;
}
.id {
width: 10px;
height: 10px;
}
#c11,
#c12,
#c13,
#c14,
#c15,
#c16 {
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
}
#c18,
#c19,
#c110,
#c111,
#c131,
#c132,
#c133,
#c134,
#c135,
#c136 {
border-bottom: 3px solid #000000;
}
#c119,
#c120,
#c121,
#c122,
#c123,
#c124,
#c131,
#c132,
#c133,
#c134,
#c126,
#c127,
#c129,
#c130 {
border-top: 3px solid #000000;
}
#c11,
#c17,
#c113,
#c119,
#c125,
#c131,
#c114,
#c120,
#c126,
#c13,
#c133,
#c110,
#c116,
#c122,
#c128 {
border-left: 3px solid #000000;
}
#c14,
#c122,
#c134,
#c111,
#c117,
#c129,
#c135,
#c16,
#c112,
#c118,
#c124,
#c130,
#c136 {
border-right: 3px solid #000000;
}
td {
position: relative;
}
td span {
position: absolute;
top: 5px;
left: 5px;
font-size: 14px;
}
<head>
<div id="p1">
HOME<br>
<table style: "align: center;">
<center><strong>KILLER MYSTERY OPERATION<br><br><br></strong></center>
<tr>
<td>
<span>31</span>
<input type="text" id="c11">
</td>
<td>
<span></span>
<input type="text" id="c12">
</td>
<td>
<span>27</span>
<input type="text" id="c13">
</td>
<td>
<span></span>
<input type="text" id="c14">
</td>
<td>
<span></span>
<input type="text" id="c15">
</td>
<td>
<span>13</span>
<input type="text" id="c16">
</td>
</tr>
<tr>
<td>
<span>3</span>
<input type="text" id="c17">
</td>
<td>
<span>16</span>
<input type="text" id="c18">
</td>
<td>
<input type="text" id="c19">
</td>
<td>
<input type="text" id="c110">
</td>
<td>
<input type="text" id="c111">
</td>
<td>
<input type="text" id="c112">
</td>
</tr>
<tr>
<td>
<input type="text" id="c113">
</td>
<td>
<input type="text" id="c114">
</td>
<td>
<input type="text" id="c115">
</td>
<td>
<input type="text" id="c116">
</td>
<td>
<input type="text" id="c117">
</td>
<td>
<input type="text" id="c118">
</td>
</tr>
<tr>
<td>
<input type="text" id="c119">
</td>
<td>
<input type="text" id="c120">
</td>
<td>
<input type="text" id="c121">
</td>
<td>
<input type="text" id="c122">
</td>
<td>
<input type="text" id="c123">
</td>
<td>
<input type="text" id="c124">
</td>
</tr>
<tr>
<td>
<input type="text" id="c125">
</td>
<td>
<input type="text" id="c126">
</td>
<td>
<input type="text" id="c127">
</td>
<td>
<input type="text" id="c128">
</td>
<td>
<input type="text" id="c129">
</td>
<td>
<input type="text" id="c130">
</td>
</tr>
<tr>
<td>
<input type="text" id="c131">
</td>
<td>
<input type="text" id="c132">
</td>
<td>
<input type="text" id="c133">
</td>
<td>
<input type="text" id="c134">
</td>
<td>
<input type="text" id="c135">
</td>
<td>
<input type="text" id="c136">
</td>
</tr>
</table>
<div id="r1-1">
Show rules<br>
</div>
<div id="r1-2" style="display:none;">
Hide rules<br>
<ul style="list-style-type:disc">
<li>Fill the grid with number between 1 to 6. No numbers should be repeated in any row or column.</li>
<li>The number in each grid is the target number and the symbol is the operation to be used.</li>
<li>Obtain an expression for a#b in terms of a and b. "x" means multiplication.<br>
<ul style="list-style-type:disc">
<li>3 # 1 = (2) x (1)</li>
<li>4 # 2 = (2) x (2)</li>
<li>5 # 4 = (1) x (4)</li>
<li>6 # 1 = (5) x (1)</li>
</ul>
</li>
<li>"∆" is the inverse operation of "#".<br>Hint:<br>If a # b = c then c ∆ b = a.</li>
</ul>
</div>
<button class="button" id="5" onclick=check1()>Check</button>
</div>
</head>
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.