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

    temperature conversion

    Having trouble with this code... trying to change status of textboxes with onclick event of radio button - any tips?
    Code:
    <html>
    <head>
        <title>Convert Temperature</title>
    </head>
    <body>
        <h1>
            Convert Temperature</h1>
        <input name="temperature" type="radio" id="rbCelsius" value="Celsius" onclick="setCelsius()" />
        From Fahrenheit to Celsius<br />
        <input type="radio" name="temperature" id="rbFahrenheit" value="Fahrenheit" onclick="setFahrenheit()" />
        From Celsius to Fahrenheit<br />
        <br />
        Degrees Fahrenheit: &nbsp&nbsp<input type="text" id="txtFahrenheit" />
        <br />
        Degrees Celsius: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="txtCelsius" />
        <p>
            <input type="button" id="btnConvert" value="Convert" /></p>
        <script type="text/javascript">
    
            var $ = function (id) {
                return document.getElementById(id);
            }
            window.onload = function () {
            
                $("btnConvert").onclick = Convert;
            
            }
            function Convert() {
                if ($("rbCelsius").checked){
                F = $("txtCelsius").value * 9 / 5 + 32;
                $("Fahrenheit").value = Math.round(F);
                }
                else if ($("rbFahrenheit").checked){
                C = $("txtFahrenheit").value -32) * 5 / 9;
                $("Celsius").value = Math.round(C);
            }
             
            function setCelsius () {
                    // move spaces to both textboxes
                    $('txtFahrenheit').value = '';
                    $('txtCelsius').value = '';
                    // disable Celsius textbox
                    $("txtCelsius").disabled = true;
                    // enable Fahrenheit textbox
                    $("txtFahrenheit").disabled = false;
    
                }
                 
                function setFahrenheit () {
                    // move spaces to both textboxes
                    $('txtFahrenheit').value = '';
                    $('txtCelsius').value = '';
                    // disable Fahrenheit textbox
                    $("txtFahrenheit").disabled = true;
                    // enable Celsius textbox
                    $("txtCelsius").disabled = false;
                }
        </script>
    </body>
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by shouts View Post
    Having trouble with this code... trying to change status of textboxes with onclick event of radio button - any tips?
    Tips
    1. USE THE ERROR CONSOLE.
    2. Lay-out your code so that all brace pairs are vertically aligned (never mind the listings you've seen that don't); that way any orphaned braces are easy for you and others to spot.
    3. USE THE ERROR CONSOLE.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    And here's a message I just posted on how to find/use the error console:
    http://www.codingforums.com/showpost...32&postcount=5

    And by "vertically aligned", LogicAli means stuff like this:
    Code:
        function Convert() 
        {
            if ($("rbCelsius").checked)
            {
                F = $("txtCelsius").value * 9 / 5 + 32;
                $("Fahrenheit").value = Math.round(F);
            }
            else if ($("rbFahrenheit").checked)
            {
                C = $("txtFahrenheit").value -32) * 5 / 9;
                $("Celsius").value = Math.round(C);
            }
    And OH! Look at that! Where's the } to match the very first { there??
    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:

    shouts (11-20-2012)

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your help! Fixed the bracket, used the debugger. Can it show the values for variables? (I'm a mainframe programmer, so I'm used to xped!)

    I'm getting a null value error in this section.
    Code:
     function Convert() {
                if ($("rbFahrenheit").checked) {
                F = parseFloat(("txtCelsius").value * 9 / 5 + 32);
                $("Fahrenheit").value = Math.round(F);
                }
                else if ($("rbCelsius").checked){
                C = parseFloat(($("txtFahrenheit").value -32) * 5 / 9);
                $("Celsius").value = Math.round(C);
                }
            }

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,395
    Thanks
    13
    Thanked 353 Times in 349 Posts
    afaik, the jQuery object does not have a checked property. you’d probably need to use the property getter. $("rbFahrenheit").prop("checked"). maybe the :checked selector is also useful if ($("rbFahrenheit:checked")).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    rbFahrenheit is the id so it needs to be preceded by '#' in the jQuery selector

    Code:
    if ($('#rbFahrenheit').is(':checked')) {
    is() is another way to do this.

    I think we can even do this..

    Code:
    if ($('#rbFahrenheit')[0].checked) {
    .. but why would we?
    Last edited by AndrewGSW; 11-20-2012 at 03:46 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Dormilich View Post
    afaik, the jQuery object does not have a checked property.
    AFAICT jQuery isn't being used, just a half-baked aliasing function that I would re-write as:

    Code:
    var $ = function (id) 
    {
      var elem = document.getElementById(id);
    
      return ( elem && elem.id === id ? elem : null );
    }

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    LogicAli is of course correct.

    Look in the originally posted code:
    Code:
            var $ = function (id) {
                return document.getElementById(id);
            }
    So
    Code:
    if ($("rbFahrenheit").checked)
    (et al.) *IS* correct.
    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.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
     var $ = function (id) {
                return document.getElementById(id);
            }
    Oops, I missed that!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    I almost didn't answer the original post because I assumed it was using jQuery and I don't use jQuery so tend to avoid posts involving it. Then I noticed his home-built function and decided to stick by big foot in it.
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Quote Originally Posted by shouts View Post
    Thank you for your help! Fixed the bracket, used the debugger. Can it show the values for variables?
    Absolutely!

    Are you using Chrome? (Below will be roughly the same in all browsers, but will be correct for Chrome.)

    First, set a breakpoint in the code.
    -- Click on the Sources tab
    -- If the JS code is not shown, look for the little right arrow at the very top left
    of the tab space and click on it. That will show you a list of the files being used for this page. Find the one with the JS code you are interested in and clock on it.
    -- Find the line where you want to inspect values, etc., and click to the far left of it
    -- A blue arrow will appear indicating you have a breakpoint on that line

    Second, make sure you hit the breakpoint.
    -- Hit a button, make a selection, click a link, etc., etc., Whatever you need to do to get your JS code to reach that breakpoint.
    -- If the breakpoint will only be hit during page startup, just hit F5 to refresh the page

    Third, look for your variable. Two ways:
    (1) In the far right column, look for "Scope variables" and then for the KIND of variable: Local, Closure, Global. Expand the appropriate scope and find your variable. It will be there by name, with its value. (If it's an array, you can expand the array to find the individual elements. If it's an object, you can find the elements of the object.)
    (2) [Often the easier choice!] Simply hover your mouse over any usage of the variable in the code visible in the Source tab. The value should pop up in a nice readable overlay.

    *********

    And all the above is just getting started with the debugger. There's a lot more you can do with it.

    Look at "Watch Expressions". Investigate the little plus sign that is part of them.

    Look at the little icons above "Watch Expressions". Hover over each one to find out what it is used for.

    And more.
    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.


  •  

    Posting Permissions

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