Автоматический пересчёт при смене значения.

[sergeos]

Добрый день!
Нужна помочь в адаптации небольшой функции в существующий код.
Итак, есть код, который при смене какого-либо значения в выпадающих списках автоматический пересчитывает значения в табличке.

Теперь появился код ещё одной небольшой функции, которая также чтото пересчитывает, но только после нажатия кнопки (input).

Требуется адаптировать этот код, чтобы он выполнялся как только меняется значение в каком-либо из выпадающих списков (всего их 3).

Это код, то что есть сейчас:

window.onload = function () { onLoad() }; onLoad = function () { initLegend(); initCalculator(); initDiscCalculator(); }
initLegend = function () {
    if (document.getElementById && document.getElementById('shemeLegend')) {
        oSheme = { 'nLegend': document.getElementById('shemeLegend'), 'aLabels': new Array() }
        initLegendLabel('L'); initLegendLabel('H'); initLegendLabel('D'); initLegendLabel('DD');
    }
}
initLegendLabel = function (sLabel) { if (oSheme && document.getElementById && document.getElementById('labelSheme' + sLabel)) { document.getElementById('labelSheme' + sLabel).onmouseover = function () { legendMouseOver(sLabel); }; document.getElementById('labelSheme' + sLabel).onmouseout = function () { legendMouseOut(); }; oSheme.aLabels.push(sLabel); if (document.getElementById('sheme' + sLabel)) { doPreload(document.getElementById('sheme' + sLabel).src); } } }
legendMouseOver = function (sLabel) { legendMouseOut(); addClass(oSheme.nLegend, 'label' + sLabel); }
legendMouseOut = function () { for (i in oSheme.aLabels) { removeClass(oSheme.nLegend, 'label' + oSheme.aLabels[i]); } }
initCalculator = function () {
    oCalculator = { 'oldWidth': document.getElementById('oldWidth'), 'oldDiameter': document.getElementById('oldDiameter'), 'oldProfile': document.getElementById('oldProfile'), 'newWidth': document.getElementById('newWidth'), 'newDiameter': document.getElementById('newDiameter'), 'newProfile': document.getElementById('newProfile'), 'oldL': document.getElementById('oldL'), 'newL': document.getElementById('newL'), 'deltaL': document.getElementById('deltaL'), 'oldH': document.getElementById('oldH'), 'newH': document.getElementById('newH'), 'deltaH': document.getElementById('deltaH'), 'oldD': document.getElementById('oldD'), 'newD': document.getElementById('newD'), 'deltaD': document.getElementById('deltaD'), 'oldDD': document.getElementById('oldDD'), 'newDD': document.getElementById('newDD'), 'deltaDD': document.getElementById('deltaDD') }
    oSpeedometer = new Array(); var i = 10; while (document.getElementById('speed' + i)) { oSpeedometer[i] = document.getElementById('speed' + i); i += 10; }
    applyCalculateEvent(oCalculator.oldWidth); applyCalculateEvent(oCalculator.oldDiameter); applyCalculateEvent(oCalculator.oldProfile); applyCalculateEvent(oCalculator.newWidth); applyCalculateEvent(oCalculator.newDiameter); applyCalculateEvent(oCalculator.newProfile); doCalculate();
}
applyCalculateEvent = function (nNode) { nNode.onchange = function () { doCalculate(); }; }
doCalculate = function () { var iOldL = oCalculator.oldWidth.value; var iNewL = oCalculator.newWidth.value; var iOldD = Math.round(oCalculator.oldDiameter.value * 25.4); var iNewD = Math.round(oCalculator.newDiameter.value * 25.4); var iOldDD = Math.round(oCalculator.oldWidth.value * oCalculator.oldProfile.value * 0.02 + oCalculator.oldDiameter.value * 25.4); var iNewDD = Math.round(oCalculator.newWidth.value * oCalculator.newProfile.value * 0.02 + oCalculator.newDiameter.value * 25.4); var iOldH = Math.round((iOldDD - iOldD) / 2); var iNewH = Math.round((iNewDD - iNewD) / 2); var iSpeedCoeff = iNewDD / iOldDD; setTextValue(oCalculator.oldL, iOldL); setTextValue(oCalculator.newL, iNewL); setTextValue(oCalculator.deltaL, iNewL - iOldL); setTextValue(oCalculator.oldH, iOldH); setTextValue(oCalculator.newH, iNewH); setTextValue(oCalculator.deltaH, iNewH - iOldH); setTextValue(oCalculator.oldD, iOldD); setTextValue(oCalculator.newD, iNewD); setTextValue(oCalculator.deltaD, iNewD - iOldD); setTextValue(oCalculator.oldDD, iOldDD); setTextValue(oCalculator.newDD, iNewDD); setTextValue(oCalculator.deltaDD, iNewDD - iOldDD); for (i in oSpeedometer) { setTextValue(oSpeedometer[i], Math.round(i * iSpeedCoeff * 10) / 10); } }
initDiscCalculator = function () {
    if (document.getElementById && document.getElementById('tireWidth') && document.getElementById('tireDiameter') && document.getElementById('tireProfile') && document.getElementById('discDiameter') && document.getElementById('discWidthMin') && document.getElementById('discWidthMax')) {
        oDiscCalculator = { 'tireWidth': document.getElementById('tireWidth'), 'tireDiameter': document.getElementById('tireDiameter'), 'tireProfile': document.getElementById('tireProfile'), 'discDiameter': document.getElementById('discDiameter'), 'discWidthMin': document.getElementById('discWidthMin'), 'discWidthMax': document.getElementById('discWidthMax') }
        applyCalculateDiscEvent(oDiscCalculator.tireWidth); applyCalculateDiscEvent(oDiscCalculator.tireDiameter); applyCalculateDiscEvent(oDiscCalculator.tireProfile); doCalculateDisc();
    }
}
applyCalculateDiscEvent = function (nNode) { nNode.onchange = function () { doCalculateDisc(); }; }
doCalculateDisc = function () { if (oDiscCalculator) { var iWidth = oDiscCalculator.tireWidth.value; var iProfile = oDiscCalculator.tireProfile.value; var iDiameter = oDiscCalculator.tireDiameter.value; iWidthMin = (Math.round(((iWidth * ((iProfile < 50) ? 0.85 : 0.7)) * 0.03937) * 2)) / 2; iWidthMax = (iWidthMin + 1.5); setTextValue(oDiscCalculator.discDiameter, iDiameter); setTextValue(oDiscCalculator.discWidthMin, iWidthMin); setTextValue(oDiscCalculator.discWidthMax, iWidthMax); } }
setTextValue = function (nNode, sValue) { sValue = String(sValue); sValue = sValue.replace(/\./, ','); nNode.innerHTML = sValue; }
isClass = function (nNode, sClassName) { return (nNode.className.indexOf(sClassName) >= 0); }

addClass = function (nNode, sClassName) {
    if (nNode.className) {
        var aClass = nNode.className.split(' '); for (var i in aClass) { if (sClassName == aClass[i]) { sClassName = ''; } }
        if (sClassName) { aClass.push(sClassName); }
        nNode.className = aClass.join(' ');
    }
    else { nNode.className = sClassName; }
}
removeClass = function (nNode, sClassName) {
    if (nNode.className) {
        var aClass = nNode.className.split(' '); for (var i in aClass) { if (sClassName == aClass[i]) { aClass.splice(i, 1); break; } }
        nNode.className = aClass.join(' ');
    }
}
doPreload = function (sImg) { var oPreload = new Image(); oPreload.src = sImg; }

этот фрагмент нужно в него встроить, чтобы работал автоматический, а не после того как нажимают кнопку.

function computeP(a) {

    document.getElementById('shirina2').innerHTML = a.td.value;
    document.getElementById('profil2').innerHTML = a.tw.value;
    document.getElementById('diametr2').innerHTML = a.trim.value;

    document.getElementById('shirina3').innerHTML = Math.round(a.tw.value.replace(',', '.') * 25.4);
    document.getElementById('profil3').innerHTML = Math.round((a.td.value.replace(',', '.') - a.trim.value.replace(',', '.')) / 2 / a.tw.value.replace(',', '.') * 100);
    document.getElementById('diametr3').innerHTML = a.trim.value.replace(',', '.');

}

function ltsize(td, tw, trim) {

    tread = (Math.round((tw * 25.4) / 5)) * 5;
    temp = (((td - trim) / 2) / tw) * 100;
    sidewall = (Math.round(temp / 5)) * 5;

    document.getElementById('shirina').innerHTML = tread;
    document.getElementById('profil').innerHTML = sidewall;
    document.getElementById('diametr').innerHTML = trim;

}

на всякий случай: кнопка вызывает код так:

<input type="button" value="Рассчитать" onclick="computeP(this.form), ltsize(document.CALCULATOR.td.value, document.CALCULATOR.tw.value, document.CALCULATOR.trim.value)">

думаю, что это не очень трудно. за работу предложу 5$ на wmz.

[devote]

когда вы научитесь не помойку писать, а нормально отформатированный код:

window.onload = function () {
    onLoad()
};
onLoad = function () {
    initLegend();
    initCalculator();
    initDiscCalculator();
}
initLegend = function () {
    if (document.getElementById && document.getElementById('shemeLegend')) {
        oSheme = {
            'nLegend': document.getElementById('shemeLegend'),
            'aLabels': new Array()
        }
        initLegendLabel('L');
        initLegendLabel('H');
        initLegendLabel('D');
        initLegendLabel('DD');
    }
}
initLegendLabel = function (sLabel) {
    if (oSheme && document.getElementById && document.getElementById('labelSheme' + sLabel)) {
        document.getElementById('labelSheme' + sLabel).onmouseover = function () {
            legendMouseOver(sLabel);
        };
        document.getElementById('labelSheme' + sLabel).onmouseout = function () {
            legendMouseOut();
        };
        oSheme.aLabels.push(sLabel);
        if (document.getElementById('sheme' + sLabel)) {
            doPreload(document.getElementById('sheme' + sLabel).src);
        }
    }
}
legendMouseOver = function (sLabel) {
    legendMouseOut();
    addClass(oSheme.nLegend, 'label' + sLabel);
}
legendMouseOut = function () {
    for (i in oSheme.aLabels) {
        removeClass(oSheme.nLegend, 'label' + oSheme.aLabels[i]);
    }
}
initCalculator = function () {
    oCalculator = {
        'oldWidth': document.getElementById('oldWidth'),
        'oldDiameter': document.getElementById('oldDiameter'),
        'oldProfile': document.getElementById('oldProfile'),
        'newWidth': document.getElementById('newWidth'),
        'newDiameter': document.getElementById('newDiameter'),
        'newProfile': document.getElementById('newProfile'),
        'oldL': document.getElementById('oldL'),
        'newL': document.getElementById('newL'),
        'deltaL': document.getElementById('deltaL'),
        'oldH': document.getElementById('oldH'),
        'newH': document.getElementById('newH'),
        'deltaH': document.getElementById('deltaH'),
        'oldD': document.getElementById('oldD'),
        'newD': document.getElementById('newD'),
        'deltaD': document.getElementById('deltaD'),
        'oldDD': document.getElementById('oldDD'),
        'newDD': document.getElementById('newDD'),
        'deltaDD': document.getElementById('deltaDD')
    }
    oSpeedometer = new Array();
    var i = 10;
    while (document.getElementById('speed' + i)) {
        oSpeedometer[i] = document.getElementById('speed' + i);
        i += 10;
    }
    applyCalculateEvent(oCalculator.oldWidth);
    applyCalculateEvent(oCalculator.oldDiameter);
    applyCalculateEvent(oCalculator.oldProfile);
    applyCalculateEvent(oCalculator.newWidth);
    applyCalculateEvent(oCalculator.newDiameter);
    applyCalculateEvent(oCalculator.newProfile);
    doCalculate();
}
applyCalculateEvent = function (nNode) {
    nNode.onchange = function () {
        doCalculate();
    };
}
doCalculate = function () {
    var iOldL = oCalculator.oldWidth.value;
    var iNewL = oCalculator.newWidth.value;
    var iOldD = Math.round(oCalculator.oldDiameter.value * 25.4);
    var iNewD = Math.round(oCalculator.newDiameter.value * 25.4);
    var iOldDD = Math.round(oCalculator.oldWidth.value * oCalculator.oldProfile.value * 0.02 + oCalculator.oldDiameter.value * 25.4);
    var iNewDD = Math.round(oCalculator.newWidth.value * oCalculator.newProfile.value * 0.02 + oCalculator.newDiameter.value * 25.4);
    var iOldH = Math.round((iOldDD - iOldD) / 2);
    var iNewH = Math.round((iNewDD - iNewD) / 2);
    var iSpeedCoeff = iNewDD / iOldDD;
    setTextValue(oCalculator.oldL, iOldL);
    setTextValue(oCalculator.newL, iNewL);
    setTextValue(oCalculator.deltaL, iNewL - iOldL);
    setTextValue(oCalculator.oldH, iOldH);
    setTextValue(oCalculator.newH, iNewH);
    setTextValue(oCalculator.deltaH, iNewH - iOldH);
    setTextValue(oCalculator.oldD, iOldD);
    setTextValue(oCalculator.newD, iNewD);
    setTextValue(oCalculator.deltaD, iNewD - iOldD);
    setTextValue(oCalculator.oldDD, iOldDD);
    setTextValue(oCalculator.newDD, iNewDD);
    setTextValue(oCalculator.deltaDD, iNewDD - iOldDD);
    for (i in oSpeedometer) {
        setTextValue(oSpeedometer[i], Math.round(i * iSpeedCoeff * 10) / 10);
    }
}
initDiscCalculator = function () {
    if (document.getElementById && document.getElementById('tireWidth') && document.getElementById('tireDiameter') && document.getElementById('tireProfile') && document.getElementById('discDiameter') && document.getElementById('discWidthMin') && document.getElementById('discWidthMax')) {
        oDiscCalculator = {
            'tireWidth': document.getElementById('tireWidth'),
            'tireDiameter': document.getElementById('tireDiameter'),
            'tireProfile': document.getElementById('tireProfile'),
            'discDiameter': document.getElementById('discDiameter'),
            'discWidthMin': document.getElementById('discWidthMin'),
            'discWidthMax': document.getElementById('discWidthMax')
        }
        applyCalculateDiscEvent(oDiscCalculator.tireWidth);
        applyCalculateDiscEvent(oDiscCalculator.tireDiameter);
        applyCalculateDiscEvent(oDiscCalculator.tireProfile);
        doCalculateDisc();
    }
}
applyCalculateDiscEvent = function (nNode) {
    nNode.onchange = function () {
        doCalculateDisc();
    };
}
doCalculateDisc = function () {
    if (oDiscCalculator) {
        var iWidth = oDiscCalculator.tireWidth.value;
        var iProfile = oDiscCalculator.tireProfile.value;
        var iDiameter = oDiscCalculator.tireDiameter.value;
        iWidthMin = (Math.round(((iWidth * ((iProfile < 50) ? 0.85 : 0.7)) * 0.03937) * 2)) / 2;
        iWidthMax = (iWidthMin + 1.5);
        setTextValue(oDiscCalculator.discDiameter, iDiameter);
        setTextValue(oDiscCalculator.discWidthMin, iWidthMin);
        setTextValue(oDiscCalculator.discWidthMax, iWidthMax);
    }
}
setTextValue = function (nNode, sValue) {
    sValue = String(sValue);
    sValue = sValue.replace(/\./, ',');
    nNode.innerHTML = sValue;
}
isClass = function (nNode, sClassName) {
    return (nNode.className.indexOf(sClassName) >= 0);
}

addClass = function (nNode, sClassName) {
    if (nNode.className) {
        var aClass = nNode.className.split(' ');
        for (var i in aClass) {
            if (sClassName == aClass[i]) {
                sClassName = '';
            }
        }
        if (sClassName) {
            aClass.push(sClassName);
        }
        nNode.className = aClass.join(' ');
    } else {
        nNode.className = sClassName;
    }
}
removeClass = function (nNode, sClassName) {
    if (nNode.className) {
        var aClass = nNode.className.split(' ');
        for (var i in aClass) {
            if (sClassName == aClass[i]) {
                aClass.splice(i, 1);
                break;
            }
        }
        nNode.className = aClass.join(' ');
    }
}
doPreload = function (sImg) {
    var oPreload = new Image();
    oPreload.src = sImg;
}

[sergeos]

когда вы научитесь не помойку писать, а нормально отформатированный код:

сорри, я не ожидал, что код будет не отформатированным, полагал что теги подправят оформление боле-менее.

[devote]

Я вижу только два места куда вы можете вставить свой код, указал комментариями:

(function() {
    var oSheme, oCalculator, oDiscCalculator, oSpeedometer = [];

    window.onload = function () {
        initLegend();
        initCalculator();
        initDiscCalculator();
    }
    function initLegend() {
        var elem = document.getElementById('shemeLegend');
        if (elem) {
            oSheme = {
                'nLegend': elem,
                'aLabels': []
            }
            initLegendLabel('L');
            initLegendLabel('H');
            initLegendLabel('D');
            initLegendLabel('DD');
        }
    }

    function initLegendLabel(sLabel) {
        var elem = document.getElementById('labelSheme' + sLabel);
        if (oSheme && elem) {
            elem.onmouseover = function () {
                legendMouseOver(sLabel);
            };
            elem.onmouseout = function () {
                legendMouseOut();
            };
            oSheme.aLabels.push(sLabel);
            if (elem = document.getElementById('sheme' + sLabel)) {
                doPreload(elem.src);
            }
        }
    }

    function legendMouseOver(sLabel) {
        legendMouseOut();
        addClass(oSheme.nLegend, 'label' + sLabel);
    }

    function legendMouseOut() {
        for (i in oSheme.aLabels) {
            removeClass(oSheme.nLegend, 'label' + oSheme.aLabels[i]);
        }
    }

    function initCalculator() {
        oCalculator = {
            'oldWidth': document.getElementById('oldWidth'),
            'oldDiameter': document.getElementById('oldDiameter'),
            'oldProfile': document.getElementById('oldProfile'),
            'newWidth': document.getElementById('newWidth'),
            'newDiameter': document.getElementById('newDiameter'),
            'newProfile': document.getElementById('newProfile'),
            'oldL': document.getElementById('oldL'),
            'newL': document.getElementById('newL'),
            'deltaL': document.getElementById('deltaL'),
            'oldH': document.getElementById('oldH'),
            'newH': document.getElementById('newH'),
            'deltaH': document.getElementById('deltaH'),
            'oldD': document.getElementById('oldD'),
            'newD': document.getElementById('newD'),
            'deltaD': document.getElementById('deltaD'),
            'oldDD': document.getElementById('oldDD'),
            'newDD': document.getElementById('newDD'),
            'deltaDD': document.getElementById('deltaDD')
        }
        var elem, i = 10;
        while (elem = document.getElementById('speed' + i)) {
            oSpeedometer[i] = elem;
            i += 10;
        }
        applyCalculateEvent(oCalculator.oldWidth);
        applyCalculateEvent(oCalculator.oldDiameter);
        applyCalculateEvent(oCalculator.oldProfile);
        applyCalculateEvent(oCalculator.newWidth);
        applyCalculateEvent(oCalculator.newDiameter);
        applyCalculateEvent(oCalculator.newProfile);
        doCalculate();
    }

    function applyCalculateEvent(nNode) {
        nNode.onchange = function () {
            doCalculate();
            // либо сюда вставляете свой код
        };
    }
    function doCalculate() {
        var iOldL = oCalculator.oldWidth.value;
        var iNewL = oCalculator.newWidth.value;
        var iOldD = Math.round(oCalculator.oldDiameter.value * 25.4);
        var iNewD = Math.round(oCalculator.newDiameter.value * 25.4);
        var iOldDD = Math.round(
            oCalculator.oldWidth.value *
            oCalculator.oldProfile.value * 0.02 +
            oCalculator.oldDiameter.value * 25.4
        );
        var iNewDD = Math.round(
            oCalculator.newWidth.value *
            oCalculator.newProfile.value * 0.02 +
            oCalculator.newDiameter.value * 25.4
        );
        var iOldH = Math.round((iOldDD - iOldD) / 2);
        var iNewH = Math.round((iNewDD - iNewD) / 2);
        var iSpeedCoeff = iNewDD / iOldDD;
        setTextValue(oCalculator.oldL, iOldL);
        setTextValue(oCalculator.newL, iNewL);
        setTextValue(oCalculator.deltaL, iNewL - iOldL);
        setTextValue(oCalculator.oldH, iOldH);
        setTextValue(oCalculator.newH, iNewH);
        setTextValue(oCalculator.deltaH, iNewH - iOldH);
        setTextValue(oCalculator.oldD, iOldD);
        setTextValue(oCalculator.newD, iNewD);
        setTextValue(oCalculator.deltaD, iNewD - iOldD);
        setTextValue(oCalculator.oldDD, iOldDD);
        setTextValue(oCalculator.newDD, iNewDD);
        setTextValue(oCalculator.deltaDD, iNewDD - iOldDD);
        for (i in oSpeedometer) {
            setTextValue(oSpeedometer[i], Math.round(i * iSpeedCoeff * 10) / 10);
        }
    }

    function initDiscCalculator() {
        if (
            document.getElementById('tireWidth') &&
            document.getElementById('tireDiameter') &&
            document.getElementById('tireProfile') &&
            document.getElementById('discDiameter') &&
            document.getElementById('discWidthMin') &&
            document.getElementById('discWidthMax')
        ) {
            oDiscCalculator = {
                'tireWidth': document.getElementById('tireWidth'),
                'tireDiameter': document.getElementById('tireDiameter'),
                'tireProfile': document.getElementById('tireProfile'),
                'discDiameter': document.getElementById('discDiameter'),
                'discWidthMin': document.getElementById('discWidthMin'),
                'discWidthMax': document.getElementById('discWidthMax')
            }
            applyCalculateDiscEvent(oDiscCalculator.tireWidth);
            applyCalculateDiscEvent(oDiscCalculator.tireDiameter);
            applyCalculateDiscEvent(oDiscCalculator.tireProfile);
            doCalculateDisc();
        }
    }

    function applyCalculateDiscEvent(nNode) {
        nNode.onchange = function () {
            doCalculateDisc();
            // либо сюда вставляете свой код
        };
    }

    function doCalculateDisc() {
        if (oDiscCalculator) {
            var iWidth = oDiscCalculator.tireWidth.value;
            var iProfile = oDiscCalculator.tireProfile.value;
            var iDiameter = oDiscCalculator.tireDiameter.value;
            var iWidthMin = (Math.round(((iWidth * ((iProfile < 50) ? 0.85 : 0.7)) * 0.03937) * 2)) / 2;
            var iWidthMax = (iWidthMin + 1.5);
            setTextValue(oDiscCalculator.discDiameter, iDiameter);
            setTextValue(oDiscCalculator.discWidthMin, iWidthMin);
            setTextValue(oDiscCalculator.discWidthMax, iWidthMax);
        }
    }

    function setTextValue(nNode, sValue) {
        sValue = String(sValue);
        sValue = sValue.replace(/\./, ',');
        nNode.innerHTML = sValue;
    }

    function isClass(nNode, sClassName) {
        return (nNode.className.indexOf(sClassName) >= 0);
    }
 
    function addClass(nNode, sClassName) {
        if (nNode.className) {
            var aClass = nNode.className.split(' ');
            for (var i in aClass) {
                if (sClassName == aClass[i]) {
                    sClassName = '';
                }
            }
            if (sClassName) {
                aClass.push(sClassName);
            }
            nNode.className = aClass.join(' ');
        } else {
            nNode.className = sClassName;
        }
    }

    function removeClass(nNode, sClassName) {
        if (nNode.className) {
            var aClass = nNode.className.split(' ');
            for (var i in aClass) {
                if (sClassName == aClass[i]) {
                    aClass.splice(i, 1);
                    break;
                }
            }
            nNode.className = aClass.join(' ');
        }
    }

    function doPreload(sImg) {
        var oPreload = new Image();
        oPreload.src = sImg;
    }
})();