www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help with Calculators

  1. #1
    Join Date
    Apr 2016
    Posts
    6

    Help with Calculators

    I run a site/forum for Diabetes help. We've developed a Calculators block that helps convert Blood Sugar readings from one unit to another.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Diabetes Calculators</title>
    <style>
    p, label {
    	font-weight: normal;
    	display: block;
    }
    .sugar {
    	color: #00557F;
    }
    .a1c {
    	color: #AE0B1B;
    }
    .temperature {
    	color:  #BA3114;
    }
    </style>
    </head>
    <body>
    <div class="sugar">
    <p>Blood Sugar</p>
    <label><input id="c" onkeyup="convert(this,f)"size="8">&nbsp; mmol/l</label>
    equals
    <label><input id="f" onkeyup="convert(this,c)"size="8">&nbsp; mg/dl</label>
    </div>
    
    <div class="a1c">
    <p>A1c to Avg. BG</p>
    <label><input id="a" onkeyup="convert(this,s)" size="8">&nbsp; A1c</label>
    equals
    <label><input id="s" onkeyup="convert(this,a)"size="8">&nbsp; Est Avg BG</label>
    </div>
    
    <div class="temperature">
    <p>Temperature</p>
    <label><input id="x" onkeyup="convert(this,y)"size="8">&nbsp;<sup>o</sup> C</label>
    equals
    <label><input id="y" onkeyup="convert(this,x)"size="8">&nbsp;<sup>o</sup> F</label>
    </div>
    
    <script>
    function convert(el,answer) {
        switch (el.id) {
         case 'c':
            answer.value = (el.value * 18.05).toFixed(2);
    	break;
         case 'f':
            answer.value = (el.value / 18.05).toFixed(2);
    	break;
         case 'a':
            answer.value = ((el.value * 35.6) - 77.3).toFixed(2);
    	break;
         case 's':
            answer.value = (((el.value * 1) + 77.3) / 35.6).toFixed(2);
    	break;
         case x:
    	answer.value = ((el.value * 1.8) + 32) .toFixed(2);
    	break;
        case y :
    	answer.value = (((el.value * 1) -32) / 1.8) .toFixed(2);
    	break;
        }
    }
    </script>
    
    </body>
    </html>
    The top 2 calculators work fine (when only the 2 are used)
    As soon as the Temperature calculator is added all of them stop working. What am I doing wrong ?

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,768
    I see
    1. form inputs but no form
    2. use of variables that are not defined
    3. missing attributes on elements like name and value tags
    4. script in the body not the head... generally speaking, code, unless for some reason for it, code should be placed within the head tag.
    5. the error I get upon looking closer, I see the use of a character that is not a single quote, the main reason for using the " double quotes in a string is its not missed like a ' single quote or mistaken like this ‘ ’ as single quotes.
    6. Remember DRY in all code, DRY = Dont Repeat Yourself, you have the possible use of a function to do repeated types of calculation...

    Code:
    function temp( scale , temp ){
      try{
    	switch( scale.toLowerCase() ){
    		case "c2f":
    			return ( 9 / 5 ) * temp + 32;
    		break;
    		
    		case "f2c":
    			return  ( temp - 32 ) / ( 9 / 5 );	
    		break;
    	
    		default:
    			return temp;
    	}
      }catch(e){ console.log("Error message: \r\n\t%s",e); }
    }
    
    
    function convert( el ){
    ...
    ... other code here
    ...
    
         case "x":
    	answer.value = temp( "c2f", el.value ) .toFixed(2);
    	break;
        case "y":
    	answer.value = temp( "f2c", el.value ) .toFixed(2);
    	break;
        }
    }
    The try..catch clause is to prevent divide by zero errors from happening.
    and you could put in the missing bits... Its tidy code then

    <input name="c" id="c" onkeyup="convert(this,f)" size="8" value="">

    I tested the temperature with -17.7777777777777 deg C and got 0 deg F. which is close enough I think.

    So from this you should be able to update your code and correct the errors in the switch..case block.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Apr 2016
    Posts
    6
    Thanks. Will implement and revert.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.29952 seconds
  • Memory Usage 2,856KB
  • Queries Executed 16 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates