Автоматический пересчёт при смене значения.
Добрый день!
Нужна помочь в адаптации небольшой функции в существующий код. Итак, есть код, который при смене какого-либо значения в выпадающих списках автоматический пересчитывает значения в табличке. Теперь появился код ещё одной небольшой функции, которая также чтото пересчитывает, но только после нажатия кнопки (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. |
когда вы научитесь не помойку писать, а нормально отформатированный код:
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() { 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; } })(); |
Часовой пояс GMT +3, время: 20:11. |