how to remove this currency mark from js? - javascript

How to remove this "Rs." part from this js ? if i remove it html page not providing correct value its not working well i wannt stop replacing "Rs." on to my html page ?
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("Rs.","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
update_balance();
}
function update_balance() {
var due = $("#total").html().replace("Rs.","") - $("#paid").val().replace("Rs.","");
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("Rs.","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("Rs."+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">Rs.0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">Rs.0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<?php
function wlcmMsg() {
echo "Welcome ! ".$name=$_SESSION['adminlog'];
}
session_start();
if(!isset($_SESSION['adminlog'])){
}
else if(isset($_SESSION['adminlog'])){
echo '<table align="right" border="0" class="dontprint">
<tr width="50%"><td>Hi! '.$name=$_SESSION['adminlog']; echo '</td>
<td><form align="right" action="menu.php"><input type="submit" value="Back" /></form></td>
<td><form align="right" action="logout.php"><input type="submit" value="logout" id="search"/></form></td>
</tr></table>';
}
//connecting to the database
define('DB_HOST', 'localhost');
define('DB_NAME', 'infinitiabill');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
//inserting Record to the database
$result = mysql_query('SELECT InvoiceNo FROM billdata ORDER BY InvoiceNo DESC LIMIT 1;');
if (mysql_num_rows($result) > 0) {
$max_InvoiceNo = mysql_fetch_row($result);
//echo $max_InvoiceNo[0]; //Here it is
}
mysql_close($con);
?>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due Rs.</td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">Rs.650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td>Rs.<span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">Rs.75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td>Rs.<span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal Rs.</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total Rs.</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid Rs.</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due Rs.</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
here m add html and css codes too herer


Try doing split instead.
Ex:
function update_balance() {
var total= parseInt($("#total").html().split("Rs.")[1]);
var pval=parseInt($("#paid").val().split("Rs.")[1]);
var due = total-pval;
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
Same goes with update_price()


Edited, #Sampath M Jay, I just change some code you just post on your snippet to make it work. Something need to know:
Did you see the the code snippet needs jQuery? I think that may be the reason that your snippet is not working, anyway, I chose jQuery 1.11.0, which makes .live deprecated, so I change $(".delete").live(... to $(".delete").on(..., it just do the same thing.
The PHP part of your snippet is removed because stack snippet will not try to resolve it, so I believe whether to remove it or not is a minor issue.
Some of the html part also has the Rs. prefix, so remove them.
In js part, the update_total, update_balance, update_price and some part of the domready code which is
$("#addrow").click(function() {
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div...
bind();
...})
all of them have the relation with Rs., so removed them.
Left is 'should-be-ok' version without the bothering Rs., enjoy, and feel free to ask if there's any problem.
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = parseInt($(this).html());
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(total);
$('#total').html(total);
update_balance();
}
function update_balance() {
var due = parseInt($("#total").html(), 10) - $("#paid").val();
due = roundNumber(due,2);
$('.due').html(due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val() * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due </td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>


You should remove "Rs" string being added at locations mentioned below. Then you can remove all replace("Rs.","")
function update_total() {
...
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
...
}
function update_balance() {
...
$('.due').html("Rs."+due);
...
}
function update_price() {
...
row.find('.price').html("Rs."+price);
...
}

Related

How to pass a html table to controller in rails?

I am doing a department store automation project in rails for the first time, So I am encountering some problems in bill generation. I want to send all the details of the table to my controller where I can calculate cart price and total price. Help me out even if there is some other way to overcome this situation.
<html>
<head>
<style>
* {box-sizing: border-box}
label {
cursor: default;
color:black;
font-size: 15px;
}
.form-row {
padding: 5px 10px;
margin: 5px 0;
}
p {
color:black;
}
h1 {
color:black;
}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: white;
}
.container {
padding: 16px;
background-color: white;
text-align: left;
font-size: 15px;
margin-top: 100px;
}
table {
width: 500px;
font-size: 30px;
border: 5px solid blue;
}
th, td {
text-align: left;
padding: 8px;
}
td {
color: black;
}
tr:nth-child(odd){background-color: #ffffb3}
th {
background-color: #4000ff;
color: white;
}
input:invalid + span:after {
content: '✖';
color: #f00;
padding-left: 5px;
}
input:valid + span:after {
content: '✓';
color: #26b72b;
padding-left: 5px;
}
</style>
</head>
<body bgcolor="white">
<div id="POItablediv" class="container">
<form name="genbill" method="get" action="genCartAction">
<table border="1">
<tbody id="POITable">
<tr>
<td>CATEGORY ID</td>
<td>NUMBER OF PRODUCTS</td>
<td>DELETE PRODUCT</td>
<td>ADD PRODUCT</td>
<td>ACTIONS</td>
</tr>
<tr>
<form name="genbill" method="get" action="genCartAction">
<td> <SELECT NAME="cid" >
<% for x in #cid %>
<OPTION VALUE="<%= x %>" ><%= x %></OPTION>
<% end %></SELECT><br>
</td>
<td><input type="text" name="nop"></td>
<td><input type="button" value="DELETE PRODUCT" data-cmd="delRow"></td>
<td><input type="button" value="ADD PRODUCT" data-cmd="insRow"></td>
</tr>
</tbody>
</table></form>
<form name="genbill" method="get" action="genBillAction">
<input type="text" name="bid" readonly hidden="true">
<input type="submit" value="CLICK HERE TO GENERATE BILL" disabled="TRUE">
</form>
</div>
<script>
function tableClicks (e) {
let cmd = e.target.getAttribute('data-cmd');
if (cmd && (cmd in buttonEvents)) {
buttonEvents[cmd](e);
}
return;
}
let table = document.getElementById('POITable');
let buttonEvents = {
insRow: function () {
var newRow = table.rows[1].cloneNode(true);
table.appendChild(newRow);
newRow.firstElementChild.textContent = newRow.rowIndex;
return;
},
delRow: function (e) {
var rowIdx = e.target.closest('tr').rowIndex,
rows = null;
if (rowIdx === 1) return; // Don't delete the first row
table.deleteRow(rowIdx);
// Update row numbers
rows = table.rows;
for (const row of rows) {
let idx = row.rowIndex;
if (idx < 1) continue; // Skip the header row
row.firstElementChild.textContent = idx;
}
return;
}
};
table.addEventListener('click', tableClicks);
</script>
</body>
</html>

If it just to calculate the total price, you should do it in the javascript code, there is not need to make an endpoint just for that...

Need to set an if, where array is NOT equal to previous array numbers

I'm trying to learn Javascript by doing some simple projects. Here I am doing BINGO card generator. It generates numbers in random, in every column minimal number is increased by 15, and it works fine, but I can't wrap my head around how should I identify duplicates of numbers in array, so that if it finds a duplicate, it should run code again.
Here is code:
var numArr = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var newNumArr = new Array();
var num = 0;
function initialize() {
for(i = 0; i < 24; i++) {
fillCard(i);
}
}
function fillCard(i) {
newNumArr[i] = Math.floor((Math.random() * 15 + numArr[i] * 15) + 1);
if(newNumArr[num] != true) {
document.getElementById('d' + i).innerHTML = num;
newNumArr[num] = true;
} else {
fillCard(i);
}
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #ee9ca7;
overflow: hidden;
font-family: 'Fjalla One', sans-serif;
}
div#info {
float: left;
width: 30%;
margin: 4.5vh auto;
}
p {
font-family: 'PT Sans', sans-serif;
margin-left: 5vw;
margin-right: 2.5vw;
line-height: 1.5;
font-size: 1vw;
text-align: justify;
justify-content: inter-word;
}
p span{
font-size: 1.5vw;
font-weight: 600;
}
h1 {
font-size: 7.5vw;
text-align: center;
margin: 0;
}
input {
background-color: transparent;
border: 3px solid #1565c0;
border-radius: 5px;
font-size: 2vh;
width: 65%;
height: 5vh;
font-family: 'Fjalla One', sans-serif;
text-align: center;
margin-left: 5vw;
margin-bottom: 1vh;
position: relative;
}
input:hover {
background-color: #1e88e5;
}
div#bingoCard {
box-sizing: border-box;
margin-top: 3vw;
width: 40%;
float: left;
}
div#bingoCard table{
position: absolute;
margin: 0 auto;
}
div#bingoCard table td {
text-align: center;
width: 7.5vw;
height: 15vh;
background-color: #076585;
color: #fafafa;
font-size: 24px;
border-radius: 5px;
}
div#bingoCard table td:hover {
background-color: #1e88e5;
}
.disabled {
background: #2196f3 !important;
border: 5px solid #1565c0;
box-sizing: border-box;
}
<!--
BINGO kortelių generatorius ir žaidimas.
Sugeneruoja nepasikartojančius skaičius kiekviename langelyje.
Pirmas stulpelis 1 - 15;
Antras stulpelis 16 - 30;
Trečias stulpelis 31 - 45;
Ketvirtas stulpelis 46 - 60;
Penktas stulpelis 61 - 75;
Vidurinis lentelės langelis iškarto turi būti užimtas.
Galimybė nusistatyti, kiek skaičių bus išridenta.
Paspaudus 'START', pradedami ridenti skaičiai, kas 5 sek. naujas skaičius.
Atsiranda mygtukas 'B!NGO'.
Žymime išridentus skaičius.
KKOMBINACIJOS:
Stulpeliai:
d0 d1 d2 d3 d4;
d5 d6 d7 d8 d9;
d10 d11 d12 d13 d14;
d15 d16 d17 d18 d19;
d20 d21 d22 d23 d24;
Eilutės:
d0 d5 d10 d15 d20;
d1 d6 d11 d16 d21;
d2 d7 d12 d17 d22;
d3 d8 d12 d18 d23;
d4 d9 d13 d19 d24;
Įstrižainės:
d0 d6 d12 d18 d24;
d4 d8 d12 d16 d20;
Surinkus vieną iš kombinacijų, spaudžiame 'B!NGO'.
Tuomet PROGRAMA TIKRINA:
Išridentus skaičius;
Pažymėtus skaičius;
Ar išridenti ir pažymėti skaičiai sutampa;
Ar sutampantys skaičiai sudaro kokią nors kombinaciją.
Jei sudaro, tai pranešama, kad buvo laimėta.
Jei nesudaro, tai neleidžiama žymėti skaičių 10 sekundžių.
Pasibaigus visiems ridenamiems skaičiams, baigiamas žaidimas.
Tikrinama ar yra sudarytos kombinacijos,
nežiūrint į tai ar yra pažymėtas skaičius.
Jei buvo išridentas skaičius, bet nepažymėtas,
jis pažymimas kita spalva.
-->
<!DOCTYPE html>
<html>
<head>
<title>B!NGO - Online BINGO Card Generator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="info">
<h1>B!NGO</h1>
<p><span>Rules of BINGO:</span><br>
You have to stamp the cells which has numbers same as numbers that appear
on the right side. When you stamp a column, a row or diagonally press
BINGO!</p>
<input type="button" name="numbers" value="GENERATE" id="generate"
onclick="initialize();">
<input type="button" name="play" value="START">
<input type="button" name="print" value="PRINT">
<p id="test"></p>
</div>
<div id="bingoCard">
<table>
<tr>
<td id="d0" class="lowest"></td>
<td id="d5" class="low"></td>
<td id="d10" class="mid"></td>
<td id="d14" class="high"></td>
<td id="d19" class="highest"></td>
</tr>
<tr>
<td id="d1" class="lowest"></td>
<td id="d6" class="low"></td>
<td id="d11" class="mid"></td>
<td id="d15" class="high"></td>
<td id="d20" class="highest"></td>
</tr>
<tr>
<td id="d2" class="lowest"></td>
<td id="d7" class="low"></td>
<td class="mid disabled">FREE</td>
<td id="d16" class="high"></td>
<td id="d21" class="highest"></td>
</tr>
<tr>
<td id="d3" class="lowest"></td>
<td id="d8" class="low"></td>
<td id="d12" class="mid"></td>
<td id="d17" class="high"></td>
<td id="d22" class="highest"></td>
</tr>
<tr>
<td id="d4" class="lowest"></td>
<td id="d9" class="low"></td>
<td id="d13" class="mid"></td>
<td id="d18" class="high"></td>
<td id="d23" class="highest"></td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
I EDITED JS file. Now it works, but only for 3 times, if I want generate new numbers more times it does not do anything.

You can check the random generated number if its present in the array or not.. if its present then just get a another random number it will ensure you don't get duplicate as done below.
let me know if this helps
var numArr = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var newNumArr = new Array();
var num = 0;
function initialize() {
for(i = 0; i < 24; i++) {
fillCard(i);
}
}
function fillCard(i) {
var temp = findNonDuplicateRandom()
newNumArr[i]=temp;
if(newNumArr[i] != true) {
document.getElementById('d' + i).innerHTML = newNumArr[i];
} else {
fillCard(i);
}
}
function findNonDuplicateRandom(){
var isDuplicate=false;
var temp = Math.floor((Math.random() * 15 + numArr[i] * 15) + 1);
var x=newNumArr.find(t=>t==temp);
if(x){
//console.log("duplicate"+temp);
return findNonDuplicateRandom();
}
else
{
//console.log("no duplicate"+temp);
return temp;
}
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #ee9ca7;
overflow: hidden;
font-family: 'Fjalla One', sans-serif;
}
div#info {
float: left;
width: 30%;
margin: 4.5vh auto;
}
p {
font-family: 'PT Sans', sans-serif;
margin-left: 5vw;
margin-right: 2.5vw;
line-height: 1.5;
font-size: 1vw;
text-align: justify;
justify-content: inter-word;
}
p span{
font-size: 1.5vw;
font-weight: 600;
}
h1 {
font-size: 7.5vw;
text-align: center;
margin: 0;
}
input {
background-color: transparent;
border: 3px solid #1565c0;
border-radius: 5px;
font-size: 2vh;
width: 65%;
height: 5vh;
font-family: 'Fjalla One', sans-serif;
text-align: center;
margin-left: 5vw;
margin-bottom: 1vh;
position: relative;
}
input:hover {
background-color: #1e88e5;
}
div#bingoCard {
box-sizing: border-box;
margin-top: 3vw;
width: 40%;
float: left;
}
div#bingoCard table{
position: absolute;
margin: 0 auto;
}
div#bingoCard table td {
text-align: center;
width: 7.5vw;
height: 15vh;
background-color: #076585;
color: #fafafa;
font-size: 24px;
border-radius: 5px;
}
div#bingoCard table td:hover {
background-color: #1e88e5;
}
.disabled {
background: #2196f3 !important;
border: 5px solid #1565c0;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>B!NGO - Online BINGO Card Generator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="info">
<h1>B!NGO</h1>
<p><span>Rules of BINGO:</span><br>
You have to stamp the cells which has numbers same as numbers that appear
on the right side. When you stamp a column, a row or diagonally press
BINGO!</p>
<input type="button" name="numbers" value="GENERATE" id="generate"
onclick="initialize();">
<input type="button" name="play" value="START">
<input type="button" name="print" value="PRINT">
<p id="test"></p>
</div>
<div id="bingoCard">
<table>
<tr>
<td id="d0" class="lowest"></td>
<td id="d5" class="low"></td>
<td id="d10" class="mid"></td>
<td id="d14" class="high"></td>
<td id="d19" class="highest"></td>
</tr>
<tr>
<td id="d1" class="lowest"></td>
<td id="d6" class="low"></td>
<td id="d11" class="mid"></td>
<td id="d15" class="high"></td>
<td id="d20" class="highest"></td>
</tr>
<tr>
<td id="d2" class="lowest"></td>
<td id="d7" class="low"></td>
<td class="mid disabled">FREE</td>
<td id="d16" class="high"></td>
<td id="d21" class="highest"></td>
</tr>
<tr>
<td id="d3" class="lowest"></td>
<td id="d8" class="low"></td>
<td id="d12" class="mid"></td>
<td id="d17" class="high"></td>
<td id="d22" class="highest"></td>
</tr>
<tr>
<td id="d4" class="lowest"></td>
<td id="d9" class="low"></td>
<td id="d13" class="mid"></td>
<td id="d18" class="high"></td>
<td id="d23" class="highest"></td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

Something like this should do it. I've simplified a bit and added some comments to hopefully help you understand the logic a bit better.
FYI the reason it was failing after a few runs is because you weren't resetting the newNumArr on initialize, so it was eventually marking all the numbers as used.
// keep a list of the numbers that have already been used
var usedNumbers = [];
function initialize() {
// reset the list each time generate is clicked
usedNumbers = [];
for(i = 0; i < 24; i++) {
fillCard(i);
}
}
function fillCard(i) {
var valueFound = false;
// keep trying to get a random value until we find a unique one
while (!valueFound) {
var num = Math.ceil((Math.random() + Math.floor(i / 5)) * 15);
// only continue if the random number is not already present
if(usedNumbers.indexOf(num) === -1) {
document.getElementById('d' + i).innerHTML = num;
// add this number to the array of used numbers
usedNumbers.push(num);
valueFound = true;
}
}
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #ee9ca7;
overflow: hidden;
font-family: 'Fjalla One', sans-serif;
}
div#info {
float: left;
width: 30%;
margin: 4.5vh auto;
}
p {
font-family: 'PT Sans', sans-serif;
margin-left: 5vw;
margin-right: 2.5vw;
line-height: 1.5;
font-size: 1vw;
text-align: justify;
justify-content: inter-word;
}
p span{
font-size: 1.5vw;
font-weight: 600;
}
h1 {
font-size: 7.5vw;
text-align: center;
margin: 0;
}
input {
background-color: transparent;
border: 3px solid #1565c0;
border-radius: 5px;
font-size: 2vh;
width: 65%;
height: 5vh;
font-family: 'Fjalla One', sans-serif;
text-align: center;
margin-left: 5vw;
margin-bottom: 1vh;
position: relative;
}
input:hover {
background-color: #1e88e5;
}
div#bingoCard {
box-sizing: border-box;
margin-top: 3vw;
width: 40%;
float: left;
}
div#bingoCard table{
position: absolute;
margin: 0 auto;
}
div#bingoCard table td {
text-align: center;
width: 7.5vw;
height: 15vh;
background-color: #076585;
color: #fafafa;
font-size: 24px;
border-radius: 5px;
}
div#bingoCard table td:hover {
background-color: #1e88e5;
}
.disabled {
background: #2196f3 !important;
border: 5px solid #1565c0;
box-sizing: border-box;
}
<!--
BINGO kortelių generatorius ir žaidimas.
Sugeneruoja nepasikartojančius skaičius kiekviename langelyje.
Pirmas stulpelis 1 - 15;
Antras stulpelis 16 - 30;
Trečias stulpelis 31 - 45;
Ketvirtas stulpelis 46 - 60;
Penktas stulpelis 61 - 75;
Vidurinis lentelės langelis iškarto turi būti užimtas.
Galimybė nusistatyti, kiek skaičių bus išridenta.
Paspaudus 'START', pradedami ridenti skaičiai, kas 5 sek. naujas skaičius.
Atsiranda mygtukas 'B!NGO'.
Žymime išridentus skaičius.
KKOMBINACIJOS:
Stulpeliai:
d0 d1 d2 d3 d4;
d5 d6 d7 d8 d9;
d10 d11 d12 d13 d14;
d15 d16 d17 d18 d19;
d20 d21 d22 d23 d24;
Eilutės:
d0 d5 d10 d15 d20;
d1 d6 d11 d16 d21;
d2 d7 d12 d17 d22;
d3 d8 d12 d18 d23;
d4 d9 d13 d19 d24;
Įstrižainės:
d0 d6 d12 d18 d24;
d4 d8 d12 d16 d20;
Surinkus vieną iš kombinacijų, spaudžiame 'B!NGO'.
Tuomet PROGRAMA TIKRINA:
Išridentus skaičius;
Pažymėtus skaičius;
Ar išridenti ir pažymėti skaičiai sutampa;
Ar sutampantys skaičiai sudaro kokią nors kombinaciją.
Jei sudaro, tai pranešama, kad buvo laimėta.
Jei nesudaro, tai neleidžiama žymėti skaičių 10 sekundžių.
Pasibaigus visiems ridenamiems skaičiams, baigiamas žaidimas.
Tikrinama ar yra sudarytos kombinacijos,
nežiūrint į tai ar yra pažymėtas skaičius.
Jei buvo išridentas skaičius, bet nepažymėtas,
jis pažymimas kita spalva.
-->
<!DOCTYPE html>
<html>
<head>
<title>B!NGO - Online BINGO Card Generator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="info">
<h1>B!NGO</h1>
<p><span>Rules of BINGO:</span><br>
You have to stamp the cells which has numbers same as numbers that appear
on the right side. When you stamp a column, a row or diagonally press
BINGO!</p>
<input type="button" name="numbers" value="GENERATE" id="generate"
onclick="initialize();">
<input type="button" name="play" value="START">
<input type="button" name="print" value="PRINT">
<p id="test"></p>
</div>
<div id="bingoCard">
<table>
<tr>
<td id="d0" class="lowest"></td>
<td id="d5" class="low"></td>
<td id="d10" class="mid"></td>
<td id="d14" class="high"></td>
<td id="d19" class="highest"></td>
</tr>
<tr>
<td id="d1" class="lowest"></td>
<td id="d6" class="low"></td>
<td id="d11" class="mid"></td>
<td id="d15" class="high"></td>
<td id="d20" class="highest"></td>
</tr>
<tr>
<td id="d2" class="lowest"></td>
<td id="d7" class="low"></td>
<td class="mid disabled">FREE</td>
<td id="d16" class="high"></td>
<td id="d21" class="highest"></td>
</tr>
<tr>
<td id="d3" class="lowest"></td>
<td id="d8" class="low"></td>
<td id="d12" class="mid"></td>
<td id="d17" class="high"></td>
<td id="d22" class="highest"></td>
</tr>
<tr>
<td id="d4" class="lowest"></td>
<td id="d9" class="low"></td>
<td id="d13" class="mid"></td>
<td id="d18" class="high"></td>
<td id="d23" class="highest"></td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

Prevent double click in JS Calculator

I have generated a JS calculator but have the following problem.
I want to prevent double click of plus, minus, divide buttons for the same time.
I have tried to do it like this
function myPlus(){
form.value += "+"
plus.onclick = ""
}
But it prevents clicking the plus button at all.
I am adding the entire code here.
Will be happy to get help!
https://jsfiddle.net/dbrtv1bg/
var form = document.getElementById("for");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var zero = document.getElementById("zero");
var plus = document.getElementById("plus");
var sum = document.getElementById("minus");
var ap = document.getElementById("ap");
var doub = document.getElementById("double");
var dd = document.getElementById("divide");
var calc = document.getElementById("got");
calc.onclick = myFunction;
one.onclick = myFunction1;
two.onclick = myFunction2;
three.onclick = myFunction3;
four.onclick = myFunction4;
five.onclick = myFunction5;
six.onclick = myFunction6;
seven.onclick = myFunction7;
eight.onclick = myFunction8;
nine.onclick = myFunction9;
zero.onclick = myFunction0;
plus.onclick = myPlus;
doub.onclick = myDouble;
sum.onclick = myFunction10;
dd.onclick = myFunctiondd;
ap.onclick = myAp;
function myFunction1() {
form.value += "1";
}
function myFunction2() {
form.value += "2";
}
function myFunction3() {
form.value += "3";
}
function myFunction4() {
form.value += "4";
}
function myFunction5() {
form.value += "5";
}
function myFunction6() {
form.value += "6";
}
function myFunction7() {
form.value += "7";
}
function myFunction8() {
form.value += "8";
}
function myFunction9() {
form.value += "9";
}
function myFunction0() {
form.value += "0";
}
function myPlus() {
form.value += "+";
}
function myDouble() {
form.value += "*"
}
function myFunction10() {
form.value += "-"
}
function myFunctiondd() {
form.value += "/"
}
function myAp() {
form.value += "."
}
function myFunction() {
var bec = eval(form.value);
form.value = bec;
}
.general {
width: 800px;
height: 600px;
background-color: rgb(121, 162, 168);
padding: 50px;
}
.head {
width: 300px;
height: 100px;
background-color: rgb(71, 86, 90);
margin-top: 50px;
margin: auto;
margin-top: 20px;
}
.tools {
width: 300px;
height: 300px;
background-color: white;
margin: auto;
padding-top: 1px;
background-color: rgb(152, 192, 199);
display: table;
}
}
.color {
background-color: rgb(134, 181, 189);
}
.first {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(134, 181, 189);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
.second {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(125, 204, 218);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
input {
float: right;
margin-top: 65px;
color: white;
background-color: rgb(71, 86, 90);
font-size: 20px;
border: transparent;
text-align: right;
}
<div class="head">
<form action="" id="myForm">
<input type="text" name="result" id="for" disabled>
</form>
</div>
<div class="tools">
<table>
<tr>
<td class="first" id="seven">7</td>
<td class="first" id="eight">8</td>
<td class="first" id="nine">9</td>
<td class="second" id="divide">/</td>
</tr>
<tr>
<td class="first" id="four">4</td>
<td class="first" id="five">5</td>
<td class="first" id="six">6</td>
<td class="second" id="double">x</td>
</tr>
<tr>
<td class="first" id="one">1</td>
<td class="first" id="two">2</td>
<td class="first" id="three">3</td>
<td class="second" id="minus">-</td>
</tr>
<tr>
<td class="first" id="zero">0</td>
<td class="first" id="ap">,</td>
<td class="second" id="got">=</td>
<td class="second" id="plus">+</td>
</tr>
</table>
</div>
</div>
</div>

I would suggest merging all of your functions for numbers and symbols together into something like this:
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';
Array.from(numbers).forEach(function(numberElement) {
var numberValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
lastClicked = 'number';
value.value += numberValue;
});
});
Array.from(symbols).forEach(function(numberElement) {
var symbolValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
if (lastClicked !== 'symbol') {
lastClicked = 'symbol';
value.value += symbolValue;
}
});
});
evaluate.addEventListener('click', function () {
value.value = eval(value.value);
});
Then you can change all of the numbers to have the number class and the symbols to have the symbol class.
Then in the symbol click event you have a check on the last clicked.
See below for working example:
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';
Array.from(numbers).forEach(function(numberElement) {
var numberValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
lastClicked = 'number';
value.value += numberValue;
});
});
Array.from(symbols).forEach(function(numberElement) {
var symbolValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
if (lastClicked !== 'symbol') {
lastClicked = 'symbol';
value.value += symbolValue;
}
});
});
evaluate.addEventListener('click', function () {
value.value = eval(value.value);
});
.general {
width: 800px;
height: 600px;
background-color: rgb(121, 162, 168);
padding: 50px;
}
.head {
width: 300px;
height: 100px;
background-color: rgb(71, 86, 90);
margin-top: 50px;
margin: auto;
margin-top: 20px;
}
.tools {
width: 300px;
height: 300px;
background-color: white;
margin: auto;
padding-top: 1px;
background-color: rgb(152, 192, 199);
display: table;
}
}
.color {
background-color: rgb(134, 181, 189);
}
.first {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(134, 181, 189);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
.second {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(125, 204, 218);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
input {
float: right;
margin-top: 65px;
color: white;
background-color: rgb(71, 86, 90);
font-size: 20px;
border: transparent;
text-align: right;
}
<div class="head">
<form action="" id="myForm">
<input type="text" name="result" id="value" disabled>
</form>
</div>
<div class="tools">
<table>
<tr>
<td class="first number" id="seven">7</td>
<td class="first number" id="eight">8</td>
<td class="first number" id="nine">9</td>
<td class="second symbol" id="divide">/</td>
</tr>
<tr>
<td class="first number" id="four">4</td>
<td class="first number" id="five">5</td>
<td class="first number" id="six">6</td>
<td class="second symbol" id="double">*</td>
</tr>
<tr>
<td class="first number" id="one">1</td>
<td class="first number" id="two">2</td>
<td class="first number" id="three">3</td>
<td class="second symbol" id="minus">-</td>
</tr>
<tr>
<td class="first number" id="zero">0</td>
<td class="first symbol">.</td>
<td class="second evaluate" id="got">=</td>
<td class="second symbol" id="plus">+</td>
</tr>
</table>
</div>
Here is a fiddle also for reference: https://jsfiddle.net/dbrtv1bg/5/

One thing you can try is to declare a variable, e.g. "operatorClicked" that keeps track of whether an operator has been clicked. Initialize it to false. In the operator functions, include an if conditional -- if operatorClicked is true, do nothing. If false, append the operator and set operatorClicked to true. If you go this route, you'll also need to reset operatorClicked to false every time a number is clicked.

Thanks everyone! I got the solution this way
I am recalling myPlus, myDOuble etc functions in the functions that give form the number value and it works :)
function myFunction1(){
form.value +="1";
plus.onclick = myPlus;
doub.onclick =myDouble;
sum.onclick= myFunction10;
dd.onclick = myFunctiondd;
ap.onclick =myAp;
https://jsfiddle.net/agxvvr73/

Javascript game help - counting with dice

For my assignment, I'm asked to create a game that uses JavaScript. Here is the premise of the game:
At the start of the game, there are ten chips. The player needs to distribute the chips between 11 squares. Each square is designated a number from two to 12. Once player has placed all the chips, he will roll two dice several times. The sum of the dice is recorded and a chip is removed from the corresponding square (if any). The number of rolls needed to remove all 10 chips marks the end of the game.
So I just began the assignment, but I am having trouble keeping a working tally of the number of rolls as it is happening. Parts of it are commented out as I was trying different things. Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
div.dice{
float:left;
width:32px;
background:#F5F5F5;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
</style>
</head>
<body>
<script type "text/javascript">
function rollDice(){
var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = "You rolled " + diceTotal;
}
var count = 0;
function displayTotal() {
count = parseInt(count) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Number of Rolls: " + count;
};
/**function displayTotal(val) {
var count = document.getElementById('count').value;
var new_count = parseInt(count, 10) + val;
if (new_count < 0) {new_count = 0;}
document.getElementById('count').value = new_count;
return new_count;
} *//
</script>
<div id="die1" class="dice">0</div>
<div id="die2" class="dice">0</div>
<button id = "roll" onclick="rollDice()">Roll Dice</button>
<div id ="showCount"></div>
<input type = "button" id = "roll" value = "Roll Dice" onclick = rollDice();/>
<h2 id="status" style="clear:left;"></h2>
</body>
</html>
Also, any suggestive information or links I should see to help with making the chips section (that gets subtracted from every time that total comes up on the die) would be extremely helpful. I have no idea how to do that. Also, how do I add one to the chip boxes on click, that's a mystery as well. I guess I could use some suggestions on counts in JS in general.
Thanks in advance for all the help!

UPDATE
I almost completed this dice game, it does everything the OP requested. I left only one minor thing undone:
Originally I had planned to dynamically remove the text that represented an array element as the real array element was actually removed. Other than that minor aesthetic flaw, it functions properly and it's UI ain't bad either.
I just remembered, there is one function I neglected to add was a reset function which is minor as well.
Plunker
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dice</title>
<style>
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
height: 100vh;
width: 100vw;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #222;
color: #EFE;
font-variant: small-caps;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shell {
position: relative;
padding: 1.5em .75em;
margin: 0 auto;
height: 100%;
width: 100%;
}
.content {
postion: absolute;
font-variant: small-caps;
}
header {
width: 100%;
height: 40px;
position: relative;
margin-bottom: 1.5em;
}
h1 {
color: hsla(45, 100%, 60%, 1);
font-weight: 700;
line-height: 1;
letter-spacing: .5px;
font-size: 3rem;
margin: 0 0 2em 0;
}
.die1,
.die2 {
width: 48px;
height: 48px;
background-color: hsla(0, 100%, 50%, .6);
border-radius: 7px;
display: inline-table;
margin: 2em;
padding-left: 4px;
}
.pip div {
width: 8px;
height: 8px;
background-color: hsla(60, 100%, 80%, 1);
border-radius: 60px;
padding: 1px;
text-align: center;
}
.row {
width: 24px;
height: 8px;
}
.blank div {
width: 8px;
height: 8px;
padding: 1px;
text-align: center;
}
#tossed,
#reset {
height: 32px;
width: 64px;
color: hsla(180, 100%, 30%, 1);
border: 1px inset hsla(228, 100%, 50%, 1);
border-radius: 7px;
text-align: center;
font-size: 1.2rem;
font-variant: small-caps;
display: inline-table;
pointer-events: auto;
cursor: pointer;
}
#reset {
display: none;
}
#set {
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
border: 1px ridge hsla(48, 100%, 50%, 1);
border-radius: 7px;
padding: 5px;
}
#field {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
border: 1px ridge hsla(48, 100%, 50%, 1);
border-radius: 7px;
padding: 5px;
}
.subFieldset {
pointer-events: none;
}
legend {
color: hsla(45, 100%, 60%, 1);
font-size: 1.5rem;
margin: 0 4em 0 0;
pointer-events: none;
}
#set input {
width: 48px;
height: 32px;
background-color: hsla(0, 0%, 80%, 1);
color: hsla(240, 100%, 40%, 1);
font-family: 'Source Code Pro';
font-size: 1rem;
border: 1px inset hsla(192, 100%, 50%, 1);
border-radius: 7px;
margin: 3px;
padding: 3px;
cursor: pointer;
pointer-events: auto;
display: table-cell;
}
label {
margin: 0 10px 0 0;
font-variant: normal;
display: inline-table;
color: hsla(60, 100%, 80%, 1);
pointer-events: none;
}
output {
color: hsla(240, 100%, 50%, 1);
font-family: 'Source Code Pro';
pointer-events: none;
}
#slotDisplay {
display: table-row;
float: left;
clear: both;
margin: 1em auto;
background-color: hsla(0, 0%, 20%, 1);
border: 1px inset hsla(45, 100%, 60%, 1);
border-radius: 7px;
color: hsla(48, 100%, 50%, 1);
width: 100%;
max-width: 760px;
min-width: 320px;
line-height: 1;
padding: 5px;
font-size: 1.5rem;
pointer-events: none;
}
</style>
</head>
<body>
<header>
<h1>Dice</h1>
</header>
<section class="shell">
<main class="content">
<section class="box">
<fieldset id="field">
<input id="reset" type="reset" value="Reset">
<label for="scored thrown">Score:
<output id="scored" name="scored" for="ui" form="ui">00</output>
/ Rolls:
<output id="thrown" name="thrown" for="ui" form="ui">00</output>
</label>
<button id="tossed" enabled="false">Roll</button>
</fieldset>
<table class="die1">
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
</table>
<table class="die2">
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
</table>
</section>
<form id="ui">
<fieldset id="set">
<legend>Distribute Chips in any Combination</legend>
<label>Chips Remaining:
<output id="wallet" name="wallet" for="ui" form="ui">10</output>
</label>
<br/>
<section class="subFieldset">
<label>
<input type="button" id="b-2" class="feed" value="02" form="ui">
</label>
<label>
<input type="button" id="b-3" class="feed" value="03" form="ui">
</label>
<label>
<input type="button" id="b-4" class="feed" value="04" form="ui">
</label>
<label>
<input type="button" id="b-5" class="feed" value="05" form="ui">
</label>
<label>
<input type="button" id="b-6" class="feed" value="06" form="ui">
</label>
<label>
<input type="button" id="b-7 " class="feed" value="07" form="ui">
</label>
<label>
<input type="button" id="b-8" class="feed" value="08" form="ui">
</label>
<label>
<input type="button" id="b-9" class="feed" value="09" form="ui">
</label>
<label>
<input type="button" id="b-10" class="feed" value="10" form="ui">
</label>
<label>
<input type="button" id="b-11" class="feed" value="11" form="ui">
</label>
<label>
<input type="button" id="b-12" class="feed" value="12" form="ui">
</label>
</section>
<textarea id="slotDisplay" readonly cols="30" rows="1" form="ui"></textarea>
</fieldset>
</form>
</main>
</section>
<script>
/*/////////////][ GLOBAL ][//////////////*/
var slots = [];
var chip = 10;
var roll = 0;
var set = document.getElementById("set");
/*/////////////][ PHASE I ][//////////////*/
set.addEventListener("click", execFeed, false);
function execFeed(event) {
if (event.target !== event.currentTarget) {
var tgt = event.target.id;
console.log('trueTarget: ' + tgt);
var feed = document.getElementById(tgt);
console.log('feed: ' + feed);
var val = feed.value;
console.log('val: ' + val);
var idx = parseInt(splitPop(tgt, '-'), 10) - 2;
console.log('idx: ' + idx);
chip = feedSlot(val, slots);
if (chip === 0) {
set.removeEventListener('click', execFeed, false);
tos.setAttribute('enabled', true);
var str0 = 'Roll the Dice to Match Each Number';
var col0 = 'lime';
msg(str0, col0);
}
}
event.stopPropagation();
}
function feedSlot(val, Arr) {
var wallet = document.getElementById('wallet');
var view = document.getElementById('slotDisplay');
Arr.push(val);
console.log('Arr: ' + Arr);
view.value = Arr;
chip--;
wallet.value = chip;
return chip;
}
var tos = document.getElementById('tossed');
/*/////////////][ PHASE II ][//////////////*/
tos.addEventListener('click', matchRoll, false);
function execRoll() {
var thrown = document.getElementById('thrown');
var scored = document.getElementById('scored');
var die1 = document.querySelector('.die1');
var die2 = document.querySelector('.die2');
var pip1 = selArr('td', die1);
var pip2 = selArr('td', die2);
var rd1 = rollDice(pip1);
var rd2 = rollDice(pip2);
var points = rd1 + rd2;
scored.value = leadZero(points, 2);
roll++;
thrown.value = leadZero(roll, 2);
return points;
}
function matchRoll() {
var val = execRoll();
var tgt = leadZero(val, 2);
console.log('execRoll: ' + tgt);
var arr = slots;
console.log('slots: ' + slots);
var mR = arr.indexOf(tgt);
if (mR === -1) {
var str1 = 'No Match, Roll Again';
var col1 = 'orange';
msg(str1, col1);
} else if (mR > -1 && chip < 9) {
++chip;
var toGo = 10 - chip;
var str2 = tgt + ' Matched, ' + toGo + ' More Matches Left';
var col2 = 'blue';
arr.splice(mR, 1);
msg(str2, col2);
} else {
++chip;
var exit = document.getElementById('reset');
var str3 = 'Completed in ' + roll + ' Rolls';
var col3 = 'yellow';
arr.splice(mR, 1);
msg(str3, col3);
exit.style.display = "block";
tos.style.display = "none";
}
wallet.value = chip;
return false;
}
function rollDice(arr) {
var ran6 = Math.floor(Math.random() * 6) + 1;
blank(arr);
switch (ran6) {
case 1:
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
break;
case 2:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 3:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 4:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 5:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 6:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[3].classList.remove('blank');
arr[3].classList.add('pip');
arr[5].classList.remove('blank');
arr[5].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
}
var pts = ran6;
return pts;
}
/*/////////////][ UTILITIES ][//////////////*/
function msg(str, col) {
var title = document.querySelector('legend');
title.style.color = col;
title.innerHTML = str;
}
function selArr(sel, ele) {
if (!ele) {
ele = document;
}
return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
function blank(arr) {
for (var i = 0; i < arr.length; i++) {
arr[i].classList.remove('pip');
arr[i].classList.add('blank');
}
return false;
}
function leadZero(num, len) {
var str = num.toString();
var zeros = len - str.length;
for (var i = 1; i <= zeros; i++) {
str = "0" + str;
}
return str;
}
function splitPop(str, delim) {
var strX = str.split(delim).pop();
return strX;
}
</script>
</body>
</html>
OLD CONTENT
I made the fun part of this dice game, it's up to you, sir to finish the rest. JS is annotated, good luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dice</title>
<style>
html, body { box-sizing: border-box; font: 400 16px/1.5 'Source Code Pro'; height: 100vh; width: 100vw; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
body { background-color: #222; color: #EFE; font-variant: small-caps; overflow: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.shell { position: relative; padding: 1.5em .75em; margin: 0 auto; height: 100%; width: 100%; }
.content { postion: absolute; font-variant: normal; }
.die1, .die2 { width: 48px; height: 48px; background-color: hsla(0,100%,50%,.6); border-radius: 7px; display: inline-table; margin: 2em; padding-left: 4px; }
.pip div { width: 8px; height: 8px; background-color: hsla(60,100%,80%,1); border-radius: 60px; padding: 1px; text-align: center; }
.row { width: 24px; height: 8px; }
.blank div { width: 8px; height: 8px; padding: 1px; text-align: center; }
#toss { height: 32px; width: 64px; border: 1px inset hsla(0,0%,50%,1); border-radius: 6px; text-align: center; font-size: 1.2rem; font-variant: small-caps; display: inline-table; }
</style>
</head>
<body>
<header>
<h1>Dice</h1>
</header>
<section class="shell">
<main class="content">
<table class="die1">
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
</table>
<button id="toss">Roll</button>
<table class="die2">
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
</table>
</main>
</section>
<script>
// Reference to Dice (2 tables in DOM)
var die1 = document.querySelector('.die1');
var die2 = document.querySelector('.die2');
// Reference to Pips (2 arrays of table-cells in Dice) derived from selArr(sel, ele)☆
var pip1 = selArr('td', die1);
var pip2 = selArr('td', die2);
// Reference to the Toss (1 button triggers the random "roll" of the Dice)
var toss = document.getElementById('toss');
/*
** When the Toss button is clicked, execute function roll(arr)★ twice;
** once for the array of table cells (Pips) in table.die1 (Die One);
** then the other one in table.die2 (Die Two)
*/
toss.addEventListener('click', function(event) {
roll(pip1);
roll(pip2);
return false;
}, false);
/* ★
** Take the array of td (Pips) and add the .blank class to each of them ✪;
** generate a random number 1 thru 6 and determine the layout of the tds (pips)
*/
function roll(arr) {
blank(arr);
var ran6 = Math.floor(Math.random() * 6) + 1;
switch(ran6) {
case 1:
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
break;
case 2:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 3:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 4:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 5:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 6:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[3].classList.remove('blank');
arr[3].classList.add('pip');
arr[5].classList.remove('blank');
arr[5].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
}
}
/* ☆
** selArr(sel, ele) (selectorArray) this utility takes a collection of selectors
** and converts them into a real array
*/
function selArr(sel, ele) {
if(!ele) {
ele = document;
}
return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
/* ✪
** blank(arr) takes an array of td (Pips) and adds the .blank class to each one of them
*/
function blank(arr) {
for(var i=0; i < arr.length; i++) {
arr[i].classList.remove('pip');
arr[i].classList.add('blank');
}
return false;
}
</script>
</body>
</html>

shrinking tr width when it get position fix

I have a table of data which cols is determined automatically with its data.
but I need to fix first row as header title "for scrolling it remains fix at the top". when I give it position:fixed , header row`s width shrinks comparing to others!!!
first pic before setting position:fixed :
after setting position:fixed:
I can't change my structure code, because there are too many similar tables !!!! Only css or javascript can be used.
my code :
<table class="list_row_container">
<tr class="list_row_title">
<td width="30px" align="center"><input type="checkbox" id="keyCheckbox" onclick="updateCheckboxes(this.checked)"></td>
<td>
تاریخ ثبت
</td>
<td>
نوع کاربری
</td>
<td>
آدرس منطقه
</td>
<td>
زیر بنا
</td>
<td>
طبقه
</td>
<td>
اتاق
</td>
<td>
عمر
</td>
<td>
اجاره
</td>
<td>
ودیعه
</td>
<td> مشاهده</td>
</tr>
<tr class="list_row_even" id="row492314" >
<td align="center"><input type="checkbox" name="info[rowIds][492314]"></td>
<td class="list_field_container"><span class"list_field_normaltext">1394/02/29</span></td>
<td class="list_field_container"><span class"list_field_normaltext">موقعيت اداري </span></td>
<td class="list_field_container"><span class"list_field_normaltext">.بلوار فردوس غرب پروانه شمالي خ شقايق غربي پ 8</span></td>
<td class="list_field_container"><span class"list_field_normaltext">100</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">1</span></td>
<td class="list_field_container"><span class"list_field_normaltext"> -</span></td>
<td class="list_field_container"><span class"list_field_normaltext">660,000,000</span></td>
<td>
<a id="viewmbt-492314" style="cursor: pointer;" title="مشاهده مشاور"><img src="../images/search.png" alt="مشاهده" /></a>
<a id="viewmbt2-492314" style="cursor: pointer;" title="مشاهده مشتری"><img src="../images/groupIcon.png" alt="مشاهده" /></a>
</td>
</tr>
....
css style :
.list_container
{
width:100%; border:1px solid #395bc2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
min-height:100px;
display:table;
}
.list_header
{
width:98%; padding:1%; height:10px;
background: #c9e3fd; /* Old browsers */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color:#000099;
line-height:10px;
font-size: 18px;
}
.list_footer_container
{
background-color: #ffcc99;
font-size: 14px;
color: black;
padding: 10px;
}
.list_has_no_row
{
font-family: sans-serif;
font-size: 13px;
color: red;
}
.list_row_container img
{
width: 25px;
height: 25px;
}
.fixed-header{
position: fixed;
top:0px;
}
.list_row_container
{
border-top: 1px silver navy;
width: 100%;
text-align: center;
}
.list_row_title
{
background-color: #ffcc99;
font-size: 14px;
color: #000099;
}
.list_row_title td{padding: 10px;}
.list_row_even
{
background-color: #ffffff;
font-size: 14px;
color: black;
}
.list_row_even:hover
{
background-color: #ffcc99;
}
.list_row_odd
{
background-color: #c9e3fc;
font-size: 14px;
color: black;
}
.list_row_odd:hover{
background-color: #ffcc99;
}
.list_field_container
{
text-align: center;
padding: 0px;
margin: 0px;
}
.list_row_title {
background-color: #9c42a0;
color: #fff;
position: fixed;
}

this is the solution :
$(document).ready(function(){
/// get the td`s width automatically and set inline style width for all tds
$(".list_row_title td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
$(".list_row_even td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
///if scroll make fix header tr
var $window = $(window);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 250) {
$(".list_row_title").addClass('fixed_table_header');
}
else {
$(".list_row_title").removeClass('fixed_table_header');
}
});
});
style :
.fixed_table_header
{
position: fixed;
top:0;
}

Categories