Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Java Script Not Working

    Hi All,

    New here and I need a bit of help. I have some Java Scripting and I want the result to display as innerHTML, the coding/calculation worked fine displaying as an alert on the page but now I've started to change it to innerHTML I can't get it to work.

    I've been on HTMLHelp forums and I was receiving so help but now the dude has turned a little sour and isn't helping but rather insulting my abilities - I put the code together in rush as I had to leave the office and got a couple of errors in my HTML coding wrong. I must be honest I'm not 100% knowledgeable with Java hell not even 5% knowledgeable but I am trying and just need a pointer or 2 to help me finish this page off. This is the first piece of Java I have used.

    Here is where I am at -

    Code:
    <table class="formclass">
    <form name="Settlement Calculator" action="" method="get">
    
    <tr>
    <td colspan="2">
    <div class="formheader"><font color="#ffffff">Settlement Calculator</div>
    <div class="formmessage"><font color="#ffffff">Remember to advise the customer that 
    </td>
    </tr>
    
    <td>
    <font color="#ffffff">Input the Balance of Account <br> 
    <div class="formmessage2">Do not put £ before the balance</div>
    </td> 
    <td>
    <input type="text" name="input_amount" /> 
    </td>
    </tr>
    
    <tr>
    <td>
    <font color="#ffffff">Discount Percent You are able to offer i.e 20 <br> 
    <div class="formmessage2">Do not put % after amount</div>
    </td>
    <td>
    <input type="text" name="discount_amount" />
    </td>
    </tr>
    
    <tr>
    <td colspan="2" style="text-align:center">
    
    <input type="submit" value="Calculate Settlement" style="width:200px;height:40px" onclick="calculateDiscount();">
    <tr>
    <td colspan="2">
    <div class="formheader"><font color="#ffffff">Settlement to be paid after discount is £<id='?'> ?</div></td>*
    </table>
    </form>
    
    <script type="text/javascript">
    function calculateDiscount(){
    var amount = document.myform.input_amount.value;
    var discount = document.myform.discount_amount.value;
    var result = amount - (( amount * discount ) / 100);
    document.getElementById('?').innerHTML ='+result';
    }
    </script>
    If you need the .CSS coding to help if you are testing here it is

    Code:
    .formclass {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    border: 3px solid #ffffff;
    padding:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #000000;
    width: 650px; margin: 0 auto;
    }
    .formheader {
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    }
    .formmessage {
    text-align:center;
    font-size:12px;
    padding-bottom:12px;
    }
    .formmessage2 {
    text-align:left;
    font-size:12px;
    padding-bottom:12px;
    }
    .required {
    font-weight:bold;
    font-size:12px;
    }
    This is a page on an internal Intranet site and isn't customer facing, Any help is greatly appreciated & thank you.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    most of your problem was with badly formed html. You can (and should) validate your html here.

    The only real problem with the js was in this line:
    Code:
    document.getElementById('?').innerHTML ='+result';
    wrapping quotes around a variable turns it into a string, so if that ever displayed it would literally put +result on the page.

    The other one is that the general convention is to give element ids recognizable, word-like names. HTML 5 is more permissive on this, but the old rule was:
    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
    I've taken out the unclosed font tags that were messing your code up (you should be assigning text color in css anyway) and tweaked it a little bit:
    Code:
    <body>
    
    <form>
    <table class="formclass">
    <tr>
    <td colspan="2">
    <div class="formheader">Settlement Calculator</div>
    <div class="formmessage">Remember to advise the customer that 
    </td>
    </tr>
    
    <td>
    Input the Balance of Account <br> 
    <div class="formmessage2">Do not put £ before the balance</div>
    </td> 
    <td>
    <input type="text" name="input_amount" /> 
    </td>
    </tr>
    
    <tr>
    <td>
    Discount Percent You are able to offer i.e 20 <br> 
    <div class="formmessage2">Do not put % after amount</div>
    </td>
    <td>
    <input type="text" name="discount_amount" />
    </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 = frm.input_amount.value;
    var discount = frm.discount_amount.value;
    var result = amount - (( amount * discount ) / 100);
    document.getElementById('total').innerHTML ="Settlement to be paid after discount is £ "+result;
    }
    </script>
    
    </body>

  • Users who have thanked xelawho for this post:

    M4RSH (04-03-2014)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Just want to say that £ sometime(? maybe always?) does not show up in html as a readable character so use &pound; in it's place.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    M4RSH (04-03-2014)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    This is the JavaScript forum. Be aware that Java and Javascript are entirely different programming languages, in spite of the confusingly similar names. Rather like Austria and Australia!

    <input type="submit" A submit button does what it says on the tin. Submits a form to a CGI script for server-side processing. Change to <input type="button" .

    document.getElementById('myspan').innerHTML += result; // "result" in quotes is the literal word result. result not in quotes is the value of the variable result.

    <span id = "myspan" class="formheader">Settlement to be paid after discount is £</span>

    <font color="#ffffff"> // defining the font color in the HTML is long obsolete and not supported by modern browsers. In any case the tags should be closed.

    Assigning a name to a form is also long obsolete and permitted only for the sake of backwards compatibility. Use an id instead and refer to the form with document.getElementById("myform"); Or do it as xelawho has indicated.

    What if your users enter XYZ or nothing instead of numbers in the input boxes? Or adds a % sign contrary to your instruction? Validation is always an important part of any form.

    Suggest you modify xelawho's code as follows:-

    var amount = Number(frm.input_amount.value) || 0; // trap NaN entries
    var discount = Number( frm.discount_amount.value) || 0;


    “The essence of being human is that one does not seek perfection.” George Orwell, English novelist and journalist, 1903-1950.
    Last edited by Philip M; 04-03-2014 at 04:33 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    M4RSH (04-03-2014)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by sunfighter View Post
    Just want to say that £ sometime(? maybe always?) does not show up in html as a readable character so use £ in it's place.
    <span id = "spanName" class="formheader">Settlement to be paid after discount is £</span>
    works fine for me in all browsers.

    it's = it is. its = possessive.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    £ doesn't work for me in any of my browsers - &pound seems to work in all

  • #7
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you Xelawho & Philip M for you advise and amendments to my code I've got it working perfect now, all but a few small exceptions -

    The font colour was in the HTML code because the majority of the machines in the office are running XP & IE7 and I found putting the colour word or colour code in my CSS these PC's didn't process it, so I've had to put these back in. The problem now sits with once the calculation is complete, the line - document.getElementById('total').innerHTML ="Settlement to be paid after discount is £ "+result; the text is displayed in Grey on a Black background so I need to add the colour code back in to there, I've tried to put the colour code back in this line but it isn't picking it up. - It displays White before processing and turns Grey afterwards...

    The final couple of niggles I need to figure out is when the discount figure has a whole pence, i.e. £1234.70, the result is showing £1234.7, is it possible to amend the code so that when this happens it picks up a "0" and adds it to the end? And also it isn't rounding up to the closet whole digit i.e. Balance 1000.26, discount 10, result 900.2339999999999

    Here is the amended Xelalwho code with Philip M's validation checks and the colour code added back in.

    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> 
    <div class="formmessage2"><font color="#ffffff">Do not put £ before the balance</div>
    </td> 
    <td>
    <input type="text" name="input_amount" /> 
    </td>
    </tr>
    
    <tr>
    <td>
    <font color="#ffffff">Discount Percent You are able to offer i.e 20 <br> 
    <div class="formmessage2"><font color="#ffffff">Do not put % after amount</div>
    </td>
    <td>
    <input type="text" name="discount_amount" />
    </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'><font color="#ffffff">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 £ "+result;
    }
    </script>

    I honestly am grateful for your support on this gents, I was banging my head off a brick wall here and couldn't see the wood for the trees.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    This is the JavaScript forum not an English forum .
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sunfighter - I've also changed the £ to &pound; to be on the safe side. £ works fine in Chrome which I use as my main browser but chances are it won't in IE7

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you can ensure two decimal places by changing the last line to
    Code:
    document.getElementById('total').innerHTML ="Settlement to be paid after discount is &pound "+result.toFixed(2);
    I don't understand your css text color problem: using this instead of font tags works on my (old) machine:
    Code:
    body{color:#ffffff}

  • Users who have thanked xelawho for this post:

    M4RSH (04-04-2014)

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by sunfighter View Post
    This is the JavaScript forum not an English forum .
    If you are not willing to learn, no-one can help you.
    If you are determined to learn, no-one can stop you.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Xelawho - I've amended to 2 decimal places and that works spot on :-D , colour code just isn't working in CSS at all.

    This is the part of the CSS code I need to remain white -

    Code:
    .formheader {
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    }

  • #13
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    I think you just forgot to add color

    Code:
    .formheader {
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    color:#ffffff;
    }
    Just noticed xelawho gave you this

    Code:
    body{color:#ffffff;}
    which should set all your text to white
    Last edited by low tech; 04-04-2014 at 09:47 AM. Reason: noticed previous post
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • Users who have thanked low tech for this post:

    M4RSH (04-04-2014)

  • #14
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Low Tech,

    Thanks for the amendments. I've done some more testing and in most all machines are now picking this coding up - additionally those that don't will be getting replaced with new PC's due to running on XP and support for that system has now stopped.

    Gents - Thank you all for your help the form is now fully working exactly how I needed it to.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •