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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Switch/HTML Display issue

    Of course I'm a newbie, but I've looked high and low and have yet to see anything similar to what I am doing.

    Being a professional myself, I highly respect your time and therefore do not wish to waste it, but it is the end of my day and I still can't figure it out. I'm sure it's something simple and stupid. Please help.

    I am trying to set up either a switch with one case and multiple actions or one button with multiple actions. I have no preference. Currently I'm using the one button multiple actions scenario.

    I then need to display those results in an html document. It doesn't have to be pretty now. I can work on that later.

    Below is the code I'm working with:

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Bill Calculator</title>
    </head>
    <body>
    <h1 style="color: red">Bill Calculator</h1>
    <h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the difference between the two.</h3>
    <hr />
    <form name="form1" action ="#">
    HCF: <input type="text" name="text1" value="-" />
    <br /><br />
    Current Rate: <input type="text" id="currentRate" />
    
    <script type="text/javascript">
    //This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
    function billcalculator1()
    {
    hcf = document.form1.text1.value;
    var current = null;
    switch (hcf)
    {
    case '1':
    current = '13.22';
    break;
    case '2':
    current = '14.52';
    break;
    default:
    alert("Please round your usage to the nearest whole number.");
    }
    document.getElementById("currentRate").value;
    }
    //]]>
    </script>
    <br /><br />
    Proposed Rate: <input type="text" id="proposedRate" />
    
    <script type="text/javascript">
    //This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
    function billcalculator2()
    {
    hcf = document.form1.text1.value;
    var proposed = null;
    switch (hcf)
    {
    case '1':
    proposed = '17.54';
    break;
    case '2':
    proposed = '18.36';
    break;
    default:
    alert("Please round your usage to the nearest whole number.");
    }
    document.getElementById("proposedRate").value;
    }
    //]]>
    </script>
    
    <br /><br />
    
    Difference: <input type="text" id="theDifference" /> 
    
    <script type="text/javascript">
    //This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
    function billcalculator3()
    {
    hcf = document.form1.text1.value;
    var difference = null;
    switch (hcf)
    {
    case '1':
    difference = '+4.32';
    break;
    case '2':
    difference = '+3.84';
    break;
    default:
    alert("Please round your usage to the nearest whole number.");
    }
    document.getElementById("theDifference").value;
    }
    //]]>
    </script>
    
    <br /><br />
    <input type="button" value="Calculate Your New Bill"
    onclick="billcalculator1(); billcalculator2(); billcalculator3()" />
    </form>
    </body>
    </html>
    Once I can figure out the basics of this I can continue developing it. I don't even know where to start with what I've done wrong. I've been learning javascript slowly and painfully on my own, as needed.

    No, this is not for a class. No, I'm not a student. Once again, I humbly ask for your assistance. Thank you for even reading this, I'm at my wits end.
    Last edited by tbravo; 07-21-2012 at 03:05 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    I'm sorry. I don't know what you are trying to do.

    I even ran the code on my machine, but it does nothing.

    Your functions end with lines such as
    Code:
    document.getElementById("proposedRate").value;
    But those lines do nothing. Are you trying to *CHANGE* the value in "proposedRate"?

    And why are you only handling values of 1 or 2 for HCF? If you only want to handle those two values, then why is that an <input> field instead of a <select> or maybe a pair of radio buttons?

    Instead of showing us non-working code, how about explaining what the purpose is?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    I *guessed* you want something along these lines:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Bill Calculator</title>
    </head>
    <body>
    <h1 style="color: red">Bill Calculator</h1>
    <h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the 
    
    difference between the two.</h3>
    <hr />
    <form id="form1" action ="#">
        HCF: <select name="HCF">
             <option value="0">--choose an HCF value--</option>
             <option value="1"> HCF 1</option>
             <option value="2"> HCF 2</option>
             </select>
        <br /><br />
        Current Rate: <input type="text" name="currentRate" readonly />
        <br /><br />
        Proposed Rate: <input type="text" name="proposedRate" readonly />
        <br /><br />
        Difference: <input type="text" name="theDifference" readonly /> 
        <br /><br />
        <input type="button" name="calculate" value="Calculate Your New Bill"/>
    </form>
    
    <script type="text/javascript">
    (
      function() {
          // table to equate HCF to current/proposed/difference:
          var hcfTable = {
              "HCF0" : {
                  "current"    : "",
                  "proposed"   : "",
                  "difference" : "" },
              "HCF1" : {
                  "current"    : "13.22",
                  "proposed"   : "17.54",
                  "difference" : "+4.82" },
              "HCF2" : {
                  "current"    : "14.52",
                  "proposed"   : "18.36",
                  "difference" : "+3.84" }
          };
     
          // get a universal reference to the form
          var form = document.getElementById("form1");
     
          // attach the calculations to the button:
          form.calculate.onclick = function() {
              var hcf = form.HCF.value; // what the user picked
              // get the appropriate subtable from the master table
              var table = hcfTable["HCF"+hcf];
              form.currentRate.value = table["current"];
              form.proposedRate.value = table["proposed"];
              form.theDifference.value = table["difference"];
          }
       }
    )(); // invoke the anonymous function to set it all up
    </script>
    </body>
    </html>
    But it's purely a guess.

    The code is more complex than is needed for your simple situation, but it shows at least one way you can build up the data in tabular form, to minimize errors.

    Note that if you use a <select> as I show there, you could get rid of the button and instead just trigger the action via the onchange of the <select>.

    To do that, just change
    Code:
          form.calculate.onclick = function() {
    to
    Code:
          form.HCF.onchange = function() {
    But I'm still just guessing.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tbravo (07-21-2012)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    A more efficient way to create many entries in the HCF table is to create an object constructor, thus:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Bill Calculator</title>
    </head>
    <body>
    <h1 style="color: red">Bill Calculator</h1>
    <h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the 
    
    difference between the two.</h3>
    <hr />
    <form id="form1" action ="#">
        HCF: <select name="HCF">
             <option value="0">--choose an HCF value--</option>
             <option value="1"> HCF 1</option>
             <option value="2"> HCF 2</option>
             </select>
        <br /><br />
        Current Rate: <input type="text" name="currentRate" readonly />
        <br /><br />
        Proposed Rate: <input type="text" name="proposedRate" readonly />
        <br /><br />
        Difference: <input type="text" name="theDifference" readonly /> 
        <br /><br />
        <input type="button" name="calculate" value="Calculate Your New Bill"/>
    </form>
    
    <script type="text/javascript">
    (
      function() {
    
          // constuctor to create one HCF entry in the hcfTable:
          function cHCF( c, p, d )
          {
              this.current = c;
              this.proposed = p;
              this.difference = d;
          }
          // table to equate HCF to current/proposed/difference:
          var hcfTable = {
              "HCF0" : new cHCF("","",""),
              "HCF1" : new cHCF("13.22","17.54","+4.82"),
              "HCF2" : new cHCF("14.52","18.36","+3.84")
          }
     
          // get a universal reference to the form
          var form = document.getElementById("form1");
     
          // attach the calculations to the button:
          form.calculate.onclick = function() {
              var hcf = form.HCF.value; // what the user picked
              // get the appropriate subtable from the master table
              var table = hcfTable["HCF"+hcf];
              form.currentRate.value = table["current"];
              form.proposedRate.value = table["proposed"];
              form.theDifference.value = table["difference"];
          }
       }
    )(); // invoke the anonymous function to set it all up
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tbravo (07-21-2012)

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by tbravo View Post
    Of course I'm a newbie, but I've looked high and low and have yet to see anything similar to what I am doing.

    Being a professional myself, I highly respect your time and therefore do not wish to waste it, but it is the end of my day and I still can't figure it out. I'm sure it's something simple and stupid. Please help.

    I am trying to set up either a switch with one case and multiple actions or one button with multiple actions. I have no preference. Currently I'm using the one button multiple actions scenario.

    I then need to display those results in an html document. It doesn't have to be pretty now. I can work on that later.

    Below is the code I'm working with:

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Bill Calculator</title>
    </head>
    <body>
    <h1 style="color: red">Bill Calculator</h1>
    <h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the difference between the two.</h3>
    <hr />
    <form name="form1" action ="#">
    HCF: <input type="text" name="text1" value="-" />
    <br /><br />
    Current Rate: <input type="text" id="currentRate" />
    
    <script type="text/javascript">
    //This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
    function billcalculator1()
    {
    hcf = document.form1.text1.value;
    var current = null;
    switch (hcf)
    {
    case '1':
    current = '13.22';
    break;
    case '2':
    current = '14.52';
    break;
    default:
    alert("Please round your usage to the nearest whole number.");
    }
    document.getElementById("currentRate").value;
    }
    //]]>
    </script>
    <br /><br />
    Proposed Rate: <input type="text" id="proposedRate" />
    
    <script type="text/javascript">
    //This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
    function billcalculator2()
    {
    hcf = document.form1.text1.value;
    var proposed = null;
    switch (hcf)
    {
    case '1':
    proposed = '17.54';
    break;
    case '2':
    proposed = '18.36';
    break;
    default:
    alert("Please round your usage to the nearest whole number.");
    }
    document.getElementById("proposedRate").value;
    }
    //]]>
    </script>
    
    <br /><br />
    
    Difference: <input type="text" id="theDifference" /> 
    
    <script type="text/javascript">
    //This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
    function billcalculator3()
    {
    hcf = document.form1.text1.value;
    var difference = null;
    switch (hcf)
    {
    case '1':
    difference = '+4.32';
    break;
    case '2':
    difference = '+3.84';
    break;
    default:
    alert("Please round your usage to the nearest whole number.");
    }
    document.getElementById("theDifference").value;
    }
    //]]>
    </script>
    
    <br /><br />
    <input type="button" value="Calculate Your New Bill"
    onclick="billcalculator1(); billcalculator2(); billcalculator3()" />
    </form>
    </body>
    </html>
    Once I can figure out the basics of this I can continue developing it. I don't even know where to start with what I've done wrong. I've been learning javascript slowly and painfully on my own, as needed.

    No, this is not for a class. No, I'm not a student. Once again, I humbly ask for your assistance. Thank you for even reading this, I'm at my wits end.

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Okay so I have 42 options for them to choose, that's why the input. I wanted to make sure my coding worked with two options to start then I can copy/paste my way to freedom. I need the individual to be able to enter the number of hundreds of cubic feet on their bill and have the corresponding bill estimates pop up. You're right about my coding not doing anything. I only wish it would. Thank you for your time and insight I really appreciate it.

    I just put your code into my html document and saw the result. This isn't exactly what I was looking for, but I think it'll work for my purposes and keep the customers out of trouble. I won't need to remind them to keep to whole numbers and not go over 42. My only other option to create this was to use a complicated formula. So this works. If it doesn't satisfy, would you mind if I pm'ed you?
    Last edited by tbravo; 07-21-2012 at 11:40 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    PM away, but if it is a question that others' could learn from, it's often better to just post in the forum.

    How complicated is the formula? Though if indeed there are only 42 possible choices, maybe the way I'm doing it would work just fine.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tbravo (07-23-2012)


  •  

    Tags for this Thread

    Posting Permissions

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