Develop Reference

Percentage Change Calculator is not working multiple times

I have a percentage change calculator which is working functionally. But I need calculators for each table row. I'm calculating from a table cell and showing result in another cell for sorting purposes.
Problem is, my calculator is only working once in a same table row .trCalculate class. I need it multiple times. Most important thing is I need result in another table cell. Is this possible?
table {
border-collapse: collapse;
font-family: arial;
}
th {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}
td {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}
input {
margin: 3px 0;
border: 1px solid #00f;
height: 32px;
padding-left: 7px;
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<table>
<tr>
<th>Calculator 01</th>
<th>Calculator 02</th>
<th>Calculator 01 Result</th>
<th>Calculator 02 Result</th>
</tr>
<tr class="trCalculate">
<td>
<input type="text" class="ChangeCalulator CalcFrom" value=""><br>
<input type="text" class="CalcTo ChangeCalulator" value="1000">
</td>
<td>
<h2 class="CalcResult"></h2>
</td>
<td>
<input type="text" class="ChangeCalulator CalcFrom" value=""></br>
<input type="text" class="CalcTo ChangeCalulator" value="2000">
</td>
<td>
<h2 class="CalcResult"></h2>
</td>
</tr>
</table>
<script>
$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
let formContainer = $(this).closest('.trCalculate')
var first = Number($(formContainer).find('.CalcFrom').val()); // = Topper Price
var second = Number($(formContainer).find('.CalcTo').val()); // = Current Price
var minus = second - first; // 2000 - 1000 = {1000 = minus}
var divide = (minus / first); // 1000 / 1000 = 1
var multiply = divide * 100; // 1 * 100 = 100%
$(formContainer).find('.CalcResult').val(Number(multiply).toFixed(2));
$(formContainer).find('.CalcResult').text(Number(multiply).toFixed(2));
});
</script>

The issue is because your code is looking for single instances of each group of elements in the tr, even though there is two sets.
To avoid this issue you can instead use closest() to get the parent td instead of the tr, then use next() to get its sibling td to update the output:
$(document).on("input change", ".change-calculator", e => {
let $td = $(e.currentTarget).closest('td');
let from = Number($td.find('.calc-from').val());
let to = Number($td.find('.calc-to').val());
let result = ((to - from) / from) * 100;
$td.next().find('.calc-result').text(result.toFixed(2));
});
table {
border-collapse: collapse;
font-family: arial;
}
th {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}
td {
border: 1px solid #000;
padding: 5px;
border-collapse: collapse;
font-size: 15px;
}
input {
margin: 3px 0;
border: 1px solid #00f;
height: 32px;
padding-left: 7px;
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<table>
<tr>
<th>Calculator 01</th>
<th>Calculator 02</th>
<th>Calculator 01 Result</th>
<th>Calculator 02 Result</th>
</tr>
<tr>
<td>
<input type="text" class="change-calculator calc-from" value=""><br />
<input type="text" class="change-calculator calc-to" value="1000">
</td>
<td>
<h2 class="calc-result"></h2>
</td>
<td>
<input type="text" class="change-calculator calc-from" value=""><br />
<input type="text" class="change-calculator calc-to" value="2000">
</td>
<td>
<h2 class="calc-result"></h2>
</td>
</tr>
</table>

Syntax error from copy to clipboard command = unable to copy Text and template

Good day.
I've been trying top figure out why the copy to clipboard not working despite of putting the correct form name, please advise what would be the best command, i've been trying so hard couldn't seem to make it work.
here is the sample of the form or template im working on
I was hoping to use the copy to clipboard function so i can copy the title and content of each line
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
<script>
<script> }
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
}
</SCRIPT>
<head>
<body>
<!--Special comment-->
<!--Style-->
<style type="text/css">
/* Some Generic styles */
H1 {
Color: #9c33ff;
font-size: 20px;
isplay: inline-block;
}
H2 {
font-size: 15px;
Color: #751aff;
font-size: 13px;
}
Body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 580px;
height: 800px;
border: none;
font: normal 12px/1 "Trebuchet MS", Helvetica, sans-serif;
color: rgba(2,2,2,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-45deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: -moz-linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: Left;
}
input {
display: inline-block;
float: center;
}
TBODY {
font-size: 14px;
Color: #313133;
font-size: 13px;
}
#tickettemplate {
font-size: 15px;
Color: #313133;
font-size: 13px;
}
</style>
<!--Html starting point-->
<h1>i</h1>
<h2>i</h2>
<P align=center><IMG
src="" alt="" width="80" height="83"></P>
<FORM name=tickettemplate id=tickettemplate>
<!-- Table to contain page title and buttons -->
<TABLE>
<TBODY>
<TR>
<TD align=center colSpan=4>
<DIV></DIV></TD></TR>
<TR>
<TD><INPUT name=Reset onclick="resetForm();return false;" type=reset value="Clear All Fields">
</TD>
<TD><INPUT name=copyform onclick="val1();return false;" type=button value="Copy to Clipboard">
</TD></TR></TBODY></TABLE><!-- Table for General information --><BR>
<!--This is where i started-->
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>General Info</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Name:</TD>
<TD><INPUT name=cname_singleuser id=cname_singleuser size=50>
</TD>
<TR>
<TD vAlign=middle>User ID:</TD>
<TD><INPUT name=userid_singleuser0 id=userid_singleuser0 size=50> </TD></TR>
<TR>
<TD vAlign=top>Callback no.: </TD>
<TD><INPUT name="callback no" id=callbackno0 size=50></TD></TR>
<TR>
<TD vAlign=middle>Email Address:</TD>
<TD><INPUT name=emailaddy_singleuser id=emailaddy_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Office Location</TD>
<TD><INPUT name=oloc_singleuser id=oloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Current Location:</TD>
<TD><INPUT name=cloc_singleuser id=cloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Exisitng/Related:</TD>
<TD><INPUT name=exrelated_singleuser id=exrelated_singleuser
size=50></TD></TR>
<TD vAlign=top>Business Unit/Client:</TD>
<TD><INPUT name=client1 id=client1 size=50> </TD></TR></TBODY></TABLE><BR>
<TABLE width=750 cellSpacing=0 cellPadding=0>
<TBODY>
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>Brief Description</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Issue: </TD>
<TD><INPUT name=Issue id=issue0 size=50></TD></TR>
<TR>
<TD vAlign=top>Number of Users Affected: </TD>
<TD><INPUT name="Number of users Affected" id=numberofusers0
size=50></TD></TR>
<TR>
<TD vAlign=top>Business Impact:</TD>
<TD><SELECT name="Business Impact" id=businessimpact0 size=1 type="text">
<OPTION value="" selected></OPTION> <OPTION value=Minor>P4
Minor</OPTION> <OPTION value=Medium>P3 Medium</OPTION> <OPTION
value=High>P2 High</OPTION> <OPTION value=Major>P1
Major</OPTION></SELECT> </TD></TR>
<TR>
<TD width=400 vAlign=top><p>Additional information/
Incident Description:</p></TD>
<TD><TEXTAREA name=Description id=Description1 rows=8 cols=60 wrap=virtual></TEXTAREA></TD></TR></TBODY></TABLE>
<TABLE width=750>
<TBODY>
<TR><BR><STRONG>Choose the Category:</STRONG></TR></TBODY></TABLE>

Not sure where you got that code from, but seems to be wrong. If you are copying the text from an input it is pretty straight forward. Focus, select, and copy from a click action.
function copy(event) {
var selector = event.target.getAttribute('data-copy')
var elem = document.querySelector(selector)
elem.focus()
elem.select()
document.execCommand('copy')
}
document.querySelectorAll('[data-copy]').forEach( function () {
this.addEventListener('click', copy)
})
<textarea id="foo">Hello world</textarea>
<button type="button" id="btnCopy1" data-copy="#foo">copy</button>
<hr/>
<textarea id="bar">Hello world</textarea>
<button type="button" id="btnCopy2" data-copy="#bar">copy</button>

Cant save content editable to localstorage?

I want to save the content editable data to local storage.
Right now if you try to edit the stock table it changes, then when you refresh the page, it goes back to initial value.
Is there a way to do this automatically, without requiring a button to save it? Just by exiting the text box, it should save automatically.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inventory</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Titan+One" rel="stylesheet">
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#hewrap{
text-align: center;
}
#he {
font-family: 'Titan One', cursive;
font-family: 'Anton', sans-serif;
color: white;
background-color: black;
font-size: 32px;
}
.fi {
border-radius:5px;
height: 30px;
}
#btn {
border-radius: 5px;
height: 30px;
background-color: blue;
color:white;
}
#ftr {
background-color: black;
}
</style>
</head>
<body>
<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear storage</a>
<div id="hewrap">
<h1 id="he">Inventory</h1>
</div>
<table id="inventory">
<thead>
<tr>
<th>Description</th>
<th>Part-#</th>
<th>Required</th>
<th>Stock</th>
<th>Price</th>
<th>N/A</th>
</tr>
<tr id="ftr">
<td><input class="fi" type="text" id="one" placeholder="Description"></td>
<td><input class="fi" type="text" id="two" placeholder="Part-#"></td>
<td><input class="fi" type="text" id="three" placeholder="Required"></td>
<td><input class="fi" type="text" id="four" placeholder="Stock"></td>
<td><input class="fi" type="text" id="five" placeholder="Price"></td>
<td><button id="btn" onclick="addRow()">ADD</button></td>
</tr>
</thead>
<tbody id="screen">
</tbody>
</table>
</body>
<script>
//scribble data
//save
$( document ).ready(function(){
$('#screen').html(localStorage.getItem("data"));
});
function addRow(){
var str = '<tr class = "boxType"><td>'+$('#one').val()+'</td>\
<td>'+$('#two').val()+'</td>\
<td>'+$('#three').val()+'</td>\
<td id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);">'+$('#four').val()+'</td>\
<td>'+$('#five').val()+'</td>\
</tr>'
$('#screen').append(str);
localStorage.setItem("data", $('#screen').html());
}
</script>
<script type="text/javascript">
getUserScribble();
</script>
</html>

How do I give my cell a value?

I am making a table in html where I have to calculate a price after discount.
I have for the moment 2 rows with 7 header cells and under each header cell I have a cell. I am struggling to add values to my cells. I tried this var cells = document.getElementById('table').getElementsByTagName('td');
cells[1] = "3"; to add the value 3 to my Quantity but the value does not appear on my table. I want to do it this way so I can later apply the convert function to all my Tds.
What am I doing wrong?
/* Format amount */
function ConvertAmount(Amount) {
var cells = document.getElementById('table').getElementsByTagName('td');
cells[1] = "3";
var Zahl = Amount;
Zahl = Math.round(Zahl * Math.pow(10, 2)) / Math.pow(10, 2);
Zahl = Zahl.toFixed(2);
Zahl = Zahl.toString();
var Negativ = false;
if (Zahl.indexOf("-") == 0) {
Negativ = true;
Zahl = Zahl.replace("-", "");
}
var str = Zahl.toString();
str = str.replace(".", ",");
var intVorkommastellen = str.length - (str.length - str.indexOf(","));
var intKTrenner = Math.floor((intVorkommastellen - 1) / 3);
var intZiffern = (intVorkommastellen % 3 == 0) ? 3 : (intVorkommastellen % 3);
strNew = str.substring(0, intZiffern);
strHelp = str.substr(intZiffern, (str.length - intZiffern));
for (var i = 0; i < intKTrenner; i++) {
strNew += "." + strHelp.substring(0, 3);
strHelp = strHelp.substr(intZiffern, (strHelp.length - intZiffern));
}
var szNachkommastellen = str.substring(intVorkommastellen, str.length);
if (szNachkommastellen.length < 3) {
strNew += str.substring(intVorkommastellen, str.length) + '0';
} else {
strNew += str.substring(intVorkommastellen, str.length);
}
var Zahl = strNew;
if (Negativ) {
Zahl = "- " + Zahl;
}
return Zahl;
}
.briefkopf {
margin-top: 5px;
}
.ueberschrift {
font-size: 20pt;
font-weight: bolder;
}
.unterueberschrift {
font-size: 14pt;
}
.dagufarbe {
color: #EC7404;
}
body {
margin: 0;
padding: 0;
font: 12pt"Arial";
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin-left: 50px;
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
page-break-before: always;
page-break-after: always;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="page">
<div class="briefkopf">
<br>
<br>
<br>
<div>
<script type="text/javascript">
</script>
</div>
<div>street</div>
<div>number</div>
<div>country</div>
</div>
<br>
<br>
<div class="ueberschrift">Offer from
<script type="text/javascript">
document.write(Invoicedate)
</script>
</div>
<br>
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 12pt;
padding: 10px 5px;
border-width: 1px;
border-style: none none solid;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-width: 3px;
border-style: none none solid;
}
</style>
<table id="table" class="tg" style="width:900px;">
<tr>
<th align="center" class="tg">Pos</th>
<th id="Quantity" align="center" class="tg">Quantity</th>
<th align="center" class="tg">Type</th>
<th align="left" class="tg">Description</th>
<th align="center" class="tg" style="width:100px;">Unitprice</th>
<th align="center" class="tg" style="width:75px;">Discount</th>
<th align="center" class="tg">Totalprice</th>
</tr>
<tr style="page-break-inside:avoid;">
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{POSITION}}'))
</script>
</center>
</td>
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{QUANTITY}}'))
</script>
</center>
</td>
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{ART}}'))
</script>
</center>
</td>
<td align="left" class="tg">
<div class="dagufarbe">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{DESCRIPTION}}'))
</script>
</center>
</div>
<br>
<div style="margin-top:-15px;">
<script type="text/javascript">
document.write(ConvertAmount('{{COMMENTARY}}'))
</script>
</div>
</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{UNITPRICE}}'))
</script>€</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{DISCOUNT}}'))
</script>%</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{POSITIONSPRICE}}'))
</script>€</td>
</tr>
</table>
<style type="text/css">
.ta {
font-family: Arial, sans-serif;
font-size: 12pt;
padding: 10px 5px;
overflow: hidden;
word-break: normal;
}
.tb {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-width: 3px;
border-style: none none solid;
}
.te {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-style: none none solid;
}
</style>
<table style="width:575px; margin-left:330px;">
<tr>
<td class="ta">Total nett
<div style="margin-left:500px; margin-top:-20px;">
<script type="text/javascript">
document.write(ConvertAmount('{{AMOUNTNETT}}'))
</script>€</div>
<br>
</td>
</tr>
<tr>
<td class="te">
<div style="margin-top:-25px;">plus VAT 19,00 %</div>
<div style="margin-left:500px; margin-top:-20px;">
<script type="text/javascript">
document.write(ConvertAmount('{{AMOUNTTAX}}'))
</script>€</div>
<br>
</td>
</tr>
<tr>
<td class="tb"><b>Total amount <div style="margin-left:500px; margin-top:-20px;"><script type="text/javascript">document.write(ConvertAmount('{{AMOUNTGROSS}}'))</script> €</div></b>
</td>
</tr>
</table>
<br>
</div>
<br>
</p>

unwanted lines in table when collapsing tr in IE

I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>

You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}

Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.