temperature conversion

shouts · 11-20-2012, 02:44 AM

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>

Logic Ali · 11-20-2012, 04:39 AM

Quote:

Originally Posted by shouts

Having trouble with this code... trying to change status of textboxes with onclick event of radio button - any tips?

Tips

USE THE ERROR CONSOLE.
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.
USE THE ERROR CONSOLE.

Old Pedant · 11-20-2012, 06:28 AM

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??

shouts · 11-20-2012, 01:48 PM

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);
            }
        }

Dormilich · 11-20-2012, 02:16 PM

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")).

AndrewGSW · 11-20-2012, 03:40 PM

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?

Logic Ali · 11-20-2012, 11:17 PM

Quote:

Originally Posted by Dormilich

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 );
}

Old Pedant · 11-20-2012, 11:28 PM

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.

AndrewGSW · 11-21-2012, 12:39 AM

Code:

 var $ = function (id) {
            return document.getElementById(id);
        }

Oops, I missed that!

Old Pedant · 11-21-2012, 12:49 AM

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.

Old Pedant · 11-21-2012, 01:06 AM

Quote:

Originally Posted by shouts

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.