Javascript confusion about sum values - javascript

I am developing a webpage.
I need help adding plus one to the value on click.
I also need help adding the price of all the items that are collected in a section in the "number of items selected"
I want to add the total price of all the items in the "Total amount section".
When I click on Add to cart once it shows plus 1 in the text box but does not add more to it when the button is clicked again.
body {
margin: 0;
padding: 0;
line-height: 1.5em;
background: #782609 url(images/body_bg.jpg) repeat-x;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
a:link,
a:visited {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
a:active,
a:hover {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
h1 {
font-size: 22px;
color: white;
font-weight: bold;
height: 27px;
padding-top: 40px;
padding-left: 70px;
}
h2 {
font-size: 13px;
font-weight: bold;
color: #fff;
height: 22px;
padding-top: 3px;
padding-left: 5px;
background: url(images/h2.jpg) no-repeat;
}
#maincontainer {
width: 1000px;
margin: 0 auto;
float: left;
}
#topsection {
background: url(images/header.jpg) no-repeat;
height: 283px;
}
#title {
margin: 0;
padding-top: 150px;
padding-left: 50px;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}
#slogan {
margin-top: 10px;
padding-left: 50px;
font-size: 12px;
font-weight: bold;
color: #ff9a59;
}
#left_column {
float: left;
width: 229px;
}
#menu_top {
float: left;
height: 33px;
width: 229px;
background: url(images/menu_top.jpg) no-repeat;
}
#right_column {
float: right;
width: 651px;
padding-right: 20px;
height: auto
}
#destination {
float: left;
padding: 10px 10px 0px 40px;
width: 280px;
border-right: dotted 1px #782609;
}
#search {
float: right;
padding: 0px 30px 0px 0px;
width: 262px;
background: url(images/form-bg.jpg) repeat-y;
}
.search_top {
background: url(images/=search.jpg) no-repeat;
width: 262px;
height: 76px;
}
.search_mid {
margin: 0px;
padding-left: 10px;
padding-top: 0px;
}
.search_bot {
background: url(images/search_bot.jpg) no-repeat;
height: 11px;
}
#contact {
width: 200px;
height: 96px;
background: url(images/contact.jpg) no-repeat;
color: #fff;
padding-left: 29px;
padding-top: 15px;
}
#bot {
float: left;
height: 22px;
width: 877px;
}
#footer {
float: left;
width: 100%;
padding-top: 16px;
height: 31px;
color: #fff;
text-align: center;
background: url(images/footer_bg.jpg) repeat-x;
}
#footer a {
color: #fff;
font-weight: bold;
}
.menu {
margin-top: 40px;
width: 210px;
}
.menu li {
list-style: none;
height: 30px;
display: block;
background: url(images/menu_bg.jpg) no-repeat;
font-weight: bold;
font-size: 12px;
padding-left: 30px;
padding-top: 7px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu a:hover {
color: #f08661;
}
.innertube {
margin: 40px;
margin-top: 0;
margin-bottom: 10px;
text-align: justify;
border-bottom: dotted 1px #782609;
}
.post_date {
color: #177212;
}
<body>
<script>
var BOO = 1;
var COIN = 1;
var MAP = 1;
var WATCH = 1;
var HARM = 1;
var GUITAR = 1;
var incrementCount = function() {
clicks++;
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li>Home
</li>
<li>Tourism
</li>
<li>Education and Industry
</li>
<li>Culture
</li>
<li>Gallery
</li>
<li>Gift Shop
</li>
</ul>
</div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000
<br />Fax: 002-200-2000
<br />Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td>
<img src="images/BOOMRANG.jpg" width="151" height="148">
</td>
<td class="echo">
<input type="text" form="esp" id="push" value="" size="2" />
</td>
<td>
<img src="images/coin.jpg" width="140" height="139">
</td>
<td class="echo">
<input type="text" form="esp" id="q2" value="" size="2" />
</td>
<td>
<img src="images/FLAG.jpg" width="175" height="152">
</td>
<td class="echo">
<input type="text" form="esp" id="q3" value="" size="2" />
</td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3>
<input type="button" value="Add to Cart" onClick="incrementCount();" q1.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN=1 ; q2.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP=1 ; q3.value="1" '/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH=1 ; q4.value="1" '/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM=1 ; q5.value="1" '/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR=1 ; q6.value="1" '/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS: </h2>
<h2> TOTAL VALUE: </h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travel Company Red - Free Website Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var BOO={price:10,qty:0}
var COIN = {price:10,qty:0}
var MAP = {price:10,qty:0}
var WATCH = {price:10,qty:0}
var HARM = {price:10,qty:0}
var GUITAR = {price:10,qty:0}
var setTotalValue=function(){
var totalvalue=BOO.price*BOO.qty+COIN.price*COIN.qty+MAP.price*MAP.qty+WATCH.price*WATCH.qty+HARM.price*HARM.qty+GUITAR.price*GUITAR.qty;
document.getElementById('totalvalue').innerHTML=totalvalue;
}
var setTotalCount=function(){
var totalitems=BOO.qty+COIN.qty+MAP.qty+WATCH.qty+HARM.qty+GUITAR.qty;
document.getElementById('totalitems').innerHTML=totalitems;
}
var addBoo = function(){
BOO.qty++;
document.getElementById('q1').setAttribute("value",BOO.qty);
setTotalValue();
setTotalCount();
}
var addCoin = function(){
COIN.qty++;
document.getElementById('q2').setAttribute("value",COIN.qty);
setTotalValue();
setTotalCount();
}
var addMap = function(){
MAP.qty++;
document.getElementById('q3').setAttribute("value",MAP.qty);
setTotalValue();
setTotalCount();
}
var addWatch = function(){
WATCH.qty++;
document.getElementById('q4').setAttribute("value",WATCH.qty);
setTotalValue();
setTotalCount();
}
var addHarm = function(){
HARM.qty++;
document.getElementById('q5').setAttribute("value",HARM.qty);
setTotalValue();
setTotalCount();
}
var addGuitar = function(){
GUITAR.qty++;
document.getElementById('q6').setAttribute("value",GUITAR.qty);
setTotalValue();
setTotalCount();
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li>Home</li>
<li>Tourism</li>
<li>Education and Industry</li>
<li>Culture</li>
<li>Gallery</li>
<li>Gift Shop</li>
</ul></div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td><img src="images/BOOMRANG.jpg" width="151" height="148"></td>
<td class="echo"><input type="text" form="esp" id="q1" value="" size="2" /></td>
<td><img src="images/coin.jpg" width="140" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
<td><img src="images/FLAG.jpg" width="175" height="152"></td>
<td class="echo"><input type="text" form="esp" id="q3" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onClick ="addBoo()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addCoin()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addMap()"/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addWatch()"/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick="addHarm()"/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick="addGuitar()"/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS:<span id="totalitems"></span> </h2>
<h2> TOTAL VALUE: <span id="totalvalue"></span></h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>

Related

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>

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>

Place display-only text in textbox for Sudoku

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>

How to make a div minimum width based on its content

I have a div with table inside. The div is full in width, but whenever I resized the screen, the div will reduce its size then its content will overlapped the div.
Now, I want the minimum width of the div based on the contents(table).
My main div is class="search".
Here is the link for my codes:
.search {
border: 2px solid #FDBF3B;
background-color: #FFEBC1;
padding: 10px;
margin: 5px 0;
}
.search table {
border: none;
}
.search .header {
margin-bottom: 5px;
border-bottom: 1px solid #FDBF3B;
padding-bottom: 2px;
color: #000F1F;
font-weight: bold;
overflow: hidden;
}
.search .buttons {
margin-top: 5px;
border-top: 1px solid #FDBF3B;
padding-top: 8px;
white-space: nowrap;
}
.inner {
padding: 7px;
min-height: 480px;
z-index: 1;
overflow: auto;
}
<DIV class=inner>
<DIV class=search sizset="false" sizcache017720493147691946="40 33 1">
<DIV class=header>Search Options </DIV>
<TABLE sizset="false" sizcache017720493147691946="40 33 1">
<TBODY sizset="false" sizcache017720493147691946="40 33 1">
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_NAME>Name:</SPAN>
</TD>
<TD>
<INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4">
</TD>
</TR>
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_ADDRESS>Address:</SPAN>
</TD>
<TD>
<INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD>
</TR>
</TBODY>
</TABLE>
<DIV class=buttons>
<INPUT name=SEARCH class=BUTTON type=button value=Search>
<INPUT name=SEARCH class=BUTTON type=button value=Clear>
<INPUT name=CREATE class=BUTTON type=button value=Create> </DIV>
</DIV>
</DIV>
apply min-width to parent div and manage overflow in body. Whenever you reduce widnow width lesser then search div's width, there will be a scroll in body.
.body{
overflow: scroll;
}
.search {
min-width:380px;
}

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.

Categories