Merge multiple javascript functions into one

Question

I have these two javascript functions and wish to "merge" them into one. I will be adding a few more of these converting functions later on and would like to keep it simple and cleaner than just duplicating the functions.

<!--Convert kg in pnd-->
<script type="text/javascript">
function init(){
document.getElementById('kg').onmouseup=function() {
if(isNaN(this.value)) {
   alert('numbers only!!');
   document.getElementById('kg').value='';
   document.getElementById('pnd').value='';
   return;
 }
   document.getElementById('pnd').value=(this.value*2.2046).toFixed(1);
  }
 }
if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else {
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }
</script>

<!--Convert cm in feet-->
<script type="text/javascript">
function start(){
document.getElementById('hauteur_cm').onmouseup=function() {
if(isNaN(this.value)) {
   alert('numbers only!!');
   document.getElementById('hauteur_cm').value='';
   document.getElementById('hauteur_pieds').value='';
   return;
 }
   document.getElementById('hauteur_pieds').value=(this.value*0.03280839895).toFixed(1);
  }
 }
if(window.addEventListener){
   window.addEventListener('load',start,false);
 }
else {
if(window.attachEvent){
   window.attachEvent('onload',start);
  }
 }
</script>

Thanks for the help

you simply need to convert the common functionality to a single function, and add parameters to pass in the values you want. Such values might include target element IDs, etc. — KP.
– KP., Commented Jan 25, 2010 at 17:09
I'm sorry if my question is not clear. I have the code to do one conversion (from kg to pounds). I will need a few more conversions later on and wondered how to incorporate them into the same function instead of adding another one (as above). Thanks. — dale
– dale, Commented Jan 25, 2010 at 17:30
Use the javascript "Switch" function : w3schools.com/jS/js_switch.asp — user238289
– user238289, Commented Jan 25, 2010 at 18:06

Pointy · Accepted Answer · 2010-01-25 17:11:38Z

1

Make an object that contains a list of the pairs of units:

var unitPairs = [
  { from: 'kg', to: 'pnd', factor: 2.2046 },
  { from: 'hauteur_cm', to: 'hauteur_pieds', factor: 0.03280839895 },
  /* ... */
];

Then you can write a function that handles all of them:

function init() {
  for (var i = 0; i < unitPairs.length; ++i) {
    var pair = unitPairs[i];
    document.getElementById(pair.from).onmouseup = function() {
      if (isNaN(this.value)) {
        // ...
      }
      document.getElementById(pair.to).value = (this.value * pair.factor).toFixed(1);
    }
    // ...
  }
}

Also you should be using a framework like jQuery to do some of the event binding work for you.

answered Jan 25, 2010 at 17:11

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Mein · Accepted Answer · 2010-01-25 17:19:16Z

This is really a guess as what you want because you arent being very specific, but it seems like you are creating conversion functions

function Conversion(ConvertFrom, ConvertTo)
{
    document.getElementById(ConvertFrom).onmouseup=function() {
        if(isNaN(this.value)) {
            alert('numbers only!!');
            document.getElementById(ConvertFrom).value='';
            document.getElementById(ConvertTo).value='';
            return;
        }

        switch(ConvertFrom + ">" + ConverTo)
        {
            case "kg>pnd":
                document.getElementById(ConvertTo).value(this.value*2.2046).toFixed(1);
                break;
            // other case follow this form
        }   
     }
 }

As far as the value for the conversion I recommend using something along the lines of a switch for each conversion rate

Zack Marrapese · Accepted Answer · 2010-01-25 17:31:56Z

0

I think your issue is that you want to have 2 different functions called onload, right? If this is the case, consider creating a queueing class (Taken from Javascript: The definitive Guide):

function runOnLoad(f) {
    if (runOnLoad.loaded) f();
    else runOnLoad.funcs.push(f);
}

runOnLoad.funcs = [];
runOnLoad.loaded = false;

runOnLoad.run = function() {
    for (var i = 0; i < runOnLoad.funcs.length; i++) {
            try { runOnLoad.funcs[i](); }
            catch(e) { }
        }
    delete runOnLoad.funcs;
    delete runOnLoad.run;
};

Then if you include this file, all you need to do in order to add another function to the onload list is call:

runOnLoad(init)
runOnLoad(start)

etc.

edited Jan 25, 2010 at 17:31

answered Jan 25, 2010 at 17:13

Zack Marrapese

12.1k9 gold badges54 silver badges70 bronze badges

Collectives™ on Stack Overflow

Merge multiple javascript functions into one

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related