Webpage Percent Calculator Options

[M4rshall]

My HTML coding is working fine - I understand what I need and I obtain the results I want to obtain from my knowledge. If the doesn't fit your model of coding then that is fine but I can't and won't make any apology for that - everyone codes the way that suits them and the results they want to obtain.

JavaScript is the one thing that I am struggling with and I have stated that from the very beginning when you suggested it. I ask for assistance and help on a help forum - the whole point of operating a help forum. Not once have asked in this post for you to do my paid job for me.

All I am asking is, now you have directed me in the best direction to obtain the result I want to achieve, I have gone away obtained some coding and made amendments to try obtain my required end result. You highlighted some errors I had made in hast with my HTML & Java coding. As a grown man I accepted that I had made a mistake and amended as per your suggestions. I have applied the update to my page and the end result isn't working, please could you look at my updated coding and give me some direction as to why this isn't working.

[Frederiek]

In fact it's not that difficult. You need a hook so the javascript knows where to place that innerHTML thing. So, change your div with this:

CODE

<div class="formheader">Settlement to be paid after discount is £ <span id="sum">000</span>.</div>

Then, there's the NAME you gave to the FORM. That doesn't match the name used in the javascript (and besides has a space in it, which it shouldn't have).

There are some HTML errors inside the TABLE structure, concerning closing </td> and </tr> tags. Indentation helps to see the proper structure of tags.
And though the FONT tag is deprecated, it does need a closing tag. But you'd don't even need it, as you can give the color in CSS: color: #ffffff;

See how the coding looks now (BTW, just about 5 minutes work):
 form.html ( 1.94k ) Number of downloads: 387

[M4rshall]

Hi Frederiek,

I have managed to get the coding to work fairly well now and also made a few further amends.

CODE

<form>
<table class="formclass">
<tr>
<td colspan="2">
<div class="formheader"><font color="#ffffff">Settlement Calculator</div>
<div class="formmessage">Remember to advise the customer that
</td>
</tr>

<td>
<font color="#ffffff">Input the Balance of Account <br>
</td>
<td>
<font color="#ffffff">£<input type="text" name="input_amount" />
</td>
</tr>

<tr>
<td>
<font color="#ffffff">Discount Percent You are able to offer<br>
</td>
<td>
<input type="text" name="discount_amount" /><font color="#ffffff">%
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">

<input type="button" value="Calculate Settlement" style="width:200px;height:40px" onclick="calculateDiscount(this.form);">
<tr>
<td colspan="2">
<div class="formheader" id='total'>Settlement to be paid after discount is £ ?</div></td>*
</table>
</form>

<script type="text/javascript">
function calculateDiscount(frm){
var amount = Number(frm.input_amount.value) || 0; // trap NaN entries
var discount = Number( frm.discount_amount.value) || 0;
var result = amount - (( amount * discount ) / 100);
document.getElementById('total').innerHTML ="Settlement to be paid after discount is &pound; "+result.toFixed(2);
}
</script>

This post has been edited by M4rshall: Apr 4 2014, 08:36 AM

[jimlongo]

Great, now just remove all those font tags.

[Frederiek]

But there are still errors in the structure of the table. The second and fifth rows don't have the necessary row tags: <tr>…</tr>.

And start making a validator your friend. Which one depends on the DOCTYPE you use in your page.
For (X)HTML 4, WDG's validator is a good choice as it gives links to the HTML reference where needed.
Or use the W3C validator for all DOCTYPES, including HTML5.

And I agree with Jim, that you shouldn't use those font tags. Put the color in the CSS. If not on the body tag, then maybe in the class selector of the table.