We Keep Coding

Javascript file partially running

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>

Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript - Radio buttons with switch case

I am trying to change the div's background colour using inputs from the radio buttons but I struggle to change colours in reverse order e.g. (pink to black ) or (green to yellow). It works perfectly fine when I try to change colour in order e.g. (black to red) or (red to yellow). I have used console.log to check the variable when I click on a different radio button and it is changing accordingly.
Many thanks
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
var radioValue = $('input[type=radio]:checked').val();
switch (radioValue) {
case 'black':
// console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-black');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-black');
});
break;
case 'red':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-red');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-red');
});
break;
case 'pink':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-pink');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-pink');
});
break;
case 'yellow':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-yellow');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-yellow');
});
break;
case 'green':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-green');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-green');
});
break;
case 'blue':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-blue');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-blue');
});
break;
case 'violet':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-violet');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-violet');
});
break;
default:
alert("!");
};
});
};
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
$('input[type=radio]').on('change', function() {
modifyCell();
});
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

You need to remove all the other cell-<color> classes when adding the new color, not just the cell class.
You shouldn't add new event handlers every time the user selects a different radio button. Just have the event handler get the color from the selected radio button.
And instead of using switch/case, you can concatenate the button value to cell- to get the new class to add.
I'm not sure why you had both mousedown and mouseup handlers, since they both did the same thing. So I combined them into a single click handler.
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
$(".cell").on("click", function() {
var radioValue = $('input[type=radio]:checked').val();
$(this).removeClass("cell cell-black cell-red cell-pink cell-yellow cell-green cell-blue cell-violet").addClass("cell-" + radioValue);
});
});
}
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript - Creating a form then adding a list inside the created form

Pretty simple, just attempting to create a new form on my HTML document then after creating the form immediately adding a list to the new form.
This is kind of what I have, there a bit of extra code but it should give a gist of what I'm attempting to achieve:
The code works for me with the exception of the line "var newmodelli = document.getElementById('modelstatline' + (count + 1));" because you can't get an ID by adding the count it seems. So I need an alternate way to achieve what I need instead of adding it like so.
<!DOCTYPE html>
<html>
<body>
<style>
div {
position: relative;
left: 50px;
width: 600px;
height: 300px;
border: 20px solid rgb(0, 255, 0);
background-color: black;
padding: 25px;
margin: 25px;
}
#a {
float: left;
display: block;
padding: 7px;
text-align: center;
font-size: 15px;
background-color: black;
color: rgb(0, 255, 0);
}
#b {
float: left;
display: block;
padding: 0px;
text-align: center;
font-size: 16px;
}
li {
display: block;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
option {
color: black;
font-size: 15px;
}
select {
color: black;
font-size: 15px;
width: 95px;
height: 23px;
text-align: center;
}
input {
width:25px;
text-align:center;
font-size: 15px;
color: black;
}
button {
width: 22px;
text-align: center;
}
</style>
<script>
var count = 1;
var newF = document.createElement('form');
newF.id = 'modelstatline' + (count + 1);
var newli = document.createElement('li');
newli.id = 'a';
var newInM = document.createElement('input');
newInM.type = 'text';
newInM.name = 'WS' + (count + 1);
function addModelstatline()
{
var newmodelform = document.getElementById('modelstatlinegrp');
// [this is where the error lies] var newmodelli = document.getElementById('modelstatline' + (count + 1));
if (count < 4)
{
newmodelform.appendChild(newF);
// [child of error] newmodelli.appendChild(newli);
// aModelstatline.appendChild(newInM);
count++;
}
else
{
alert('Too many');
}
}
</script>
<div>
<ul id="modelstatlinegrp">
<form id="modelstatline1">
<li id="a">Model Statline 1<br />
<button type="button" onclick="javascript: addModelstatline();">+</button>
<li id="a">M<br /><input type="text" name="M1"></li>
<li id="a">WS<br /><input style="width:14px" type="text" name="WS1"><b style="font-size:20px"> +</b></li>
<li id="a">BS<br /><input style="width:14px" type="text" name="BS1"><b style="font-size:20px"> +</b></li>
<li id="a">S<br /><input type="text" name="S1"></li>
<li id="a">T<br /><input type="text" name="T1"></li>
<li id="a">W<br /><input type="text" name="W1"></li>
<li id="a">A<br /><input type="text" name="A1"></li>
<li id="a">Ld<br /><input type="text" name="Ld1"></li>
<li id="a">Sv<br /><input style="width:14px" type="text" name="Sv1"><b style="font-size:20px">+</b></li>
</form>
</ul>
<br />
<br />
</div>
</body>
</html>

Yeah, not totally sure what you want but it something like this, I think.
let form = document.createElement('form');
form.id = 'modelstatline2';
document.querySelector('.container').appendChild(form);
for (let ix = 1; ix < 4; ix++) {
let li = document.createElement('li');
li.id = 'a';
let input = document.createElement('input');
input.type = 'text';
input.name = 'WS' + ix;
li.appendChild(input);
form.appendChild(li);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container"></div>

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/

how to remove this currency mark from js?

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);
...
}