Merge multiple javascript functions into one
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);
}
}
&l开发者_如何转开发t;/script>
Thanks for the help
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.
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
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.
精彩评论