Объединение похожих Java скриптов на одной странице
Добрый день, уважаемые форумчане.
Признаюсь, в программировании я пока профан, но работающие скрипты 3-ех калькуляторов стоимости для добавления их на сайт я написал. Однако возникла проблема, 3 скрипта работают по раздельности, но добавляя их последовательно на общую htm страницу и разделяя их тэгом скрипт, они работать отказываются. Вот первый скрипт: document.body.onload = function() { function calc() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir").value, dlin1 = +d.getElementById("dlin").value, sq = (shir1 * dlin1 / 1000000), color1 = d.getElementById("color1"), color2 = d.getElementById("color2"), color3 = d.getElementById("color3"), color4 = d.getElementById("color4"), tolsh1 = d.getElementById("tolsh1"), tolsh2 = d.getElementById("tolsh2"), tolsh3 = d.getElementById("tolsh3"), tolsh4 = d.getElementById("tolsh4"), bort1 = d.getElementById("bort1"), bort2 = d.getElementById("bort2"), dost = d.getElementById("dost"), ust = d.getElementById("ust"), result = d.getElementById("result"), kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000); }; document.form.onchange = calc; calc(); } Вот второй - в него лишь добавляется одна новая пара (dlin2 и shir2) переменных, все остальные переменные старые document.body.onload = function() { function calc() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir").value, dlin1 = +d.getElementById("dlin").value, shir2 = +d.getElementById("shir01").value, dlin2 = +d.getElementById("dlin01").value, sq = ((shir1 * dlin1 / 1000000) + (shir2 * dlin2 / 1000000) - (shir1 * shir2 / 1000000)), color1 = d.getElementById("color1"), color2 = d.getElementById("color2"), color3 = d.getElementById("color3"), color4 = d.getElementById("color4"), tolsh1 = d.getElementById("tolsh1"), tolsh2 = d.getElementById("tolsh2"), tolsh3 = d.getElementById("tolsh3"), tolsh4 = d.getElementById("tolsh4"), bort1 = d.getElementById("bort1"), bort2 = d.getElementById("bort2"), dost = d.getElementById("dost"), ust = d.getElementById("ust"), result = d.getElementById("result"), kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000); }; document.form.onchange = calc; calc(); } Вот третий код. Он отличается от предыдущего опять на одну пару переменных (dlin3 и shir3). document.body.onload = function() { function calc() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir").value, dlin1 = +d.getElementById("dlin").value, shir2 = +d.getElementById("shir01").value, dlin2 = +d.getElementById("dlin01").value, shir3 = +d.getElementById("shir02").value, dlin3 = +d.getElementById("dlin02").value, sq = ((shir1 * dlin1 / 1000000) + (shir2 * dlin2 / 1000000) + (shir3 * dlin3 / 1000000) - (shir1 * shir2 / 1000000) - (shir1 * shir3/1000000)), color1 = d.getElementById("color1"), color2 = d.getElementById("color2"), color3 = d.getElementById("color3"), color4 = d.getElementById("color4"), tolsh1 = d.getElementById("tolsh1"), tolsh2 = d.getElementById("tolsh2"), tolsh3 = d.getElementById("tolsh3"), tolsh4 = d.getElementById("tolsh4"), bort1 = d.getElementById("bort1"), bort2 = d.getElementById("bort2"), dost = d.getElementById("dost"), ust = d.getElementById("ust"), result = d.getElementById("result"), kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000 + bortik* dlin2/1000 + bortik* dlin3/1000); }; document.form.onchange = calc; calc(); } Мой вопрос состоит в следующем: 1) Может ли так быть, что калькуляторы не работают из-за совпадения имен переменных? Я побывал их переименовать, но они по прежнему не работали. 2) Может здесь нужно прописать один универсальный скрипт? (Если нужен универсальный скрипт, то как учесть то, что каждый скрипт прописан под свой набор ввод вводных текстовых полей, куда пользователь вводит свои параметры размеров). Заранее благодарю за ответ. |
Цитата:
Цитата:
|
Цитата:
Спасибо. |
Цитата:
Цитата:
|
Для наглядности:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ГГ</title> </head> <body> <input type="text"> <script> document.body.onload = function(){ function cal(){alert('gg')} document.querySelector('input').oninput = cal; } document.body.onload = function(){ function cal(){alert('gggg')} document.querySelector('input').oninput = cal; } </script> </body> </html> |
Цитата:
EmperioAf, благодарю Вас за помощь! |
Вынужден опять обращаться к вам, переименование функции не помогло, 2 калькулятора опять отказываются работать на одной странице, не могу понять в чем дело:help:
<b> ширина:</b> <input id="shir" type="text" value="5" /> <b>M<sup>2</sup></b> <b> длина:</b> <input id="dlin" type="text" value="5" /> <b>M<sup>2</sup></b> <form id="form" name="form"> <div class="calc-bgarea"> <b> Выберите тип:</b> <input type="radio" id="color1" name="cena" value="12000" checked />Стандарт <input type="radio" id="color2" name="cena" value="13000" />Цвет<br/> <input type="radio" id="color3" name="cena" value="14000" />Стекляшки <input type="radio" id="color4" name="cena" value="15000" />Плитка <b> толщина</b> <input type="radio" id="tolsh1" name="toshina" value="0" checked />30 мм <input type="radio" id="tolsh2" name="toshina" value="1000" />40 мм<br/> <input type="radio" id="tolsh3" name="toshina" value="2000" />60 мм <input type="radio" id="tolsh4" name="toshina" value="5000" />80 мм <b> Бортик </b> <input type="radio" id="bort1" name="borti" value="0" checked />Без бортика <input type="radio" id="bort2" name="borti" value="1000" /> С прямоугольным бортиком<br/> <br/> <input type="checkbox" value="2000" id="dost" /> <label for="dost">Требуется доставка?</label> <br/> <input type="checkbox" value="5000" id="ust" /> <label for="ust">Требуется установка?</label> <br/> </div> <div class="calc-bg2"> Итого </div> <div class="calc-bgtotal"> Итого: <span id="result">0</span> руб.<br> </div> </form> <script> document.body.onload = function() { function calc1() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir").value, dlin1 = +d.getElementById("dlin").value, sq = (shir1 * dlin1 / 1000000), color1 = d.getElementById("color1"), color2 = d.getElementById("color2"), color3 = d.getElementById("color3"), color4 = d.getElementById("color4"), tolsh1 = d.getElementById("tolsh1"), tolsh2 = d.getElementById("tolsh2"), tolsh3 = d.getElementById("tolsh3"), tolsh4 = d.getElementById("tolsh4"), bort1 = d.getElementById("bort1"), bort2 = d.getElementById("bort2"), dost = d.getElementById("dost"), ust = d.getElementById("ust"), result = d.getElementById("result"), kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000); }; document.form.onchange = calc1; calc1(); } </script> <b> ширина:</b> <input id="shir" type="text" value="5" /> <b>M<sup>2</sup></b> <b> длина:</b> <input id="dlin" type="text" value="5" /> <b>M<sup>2</sup></b> <b> ширина1:</b> <input id="shir01" type="text" value="5" /> <b>M<sup>2</sup></b> <b> длина1:</b> <input id="dlin01" type="text" value="5" /> <b>M<sup>2</sup></b> <form id="form" name="form"> <div class="calc-bgarea"> <b> Выберите тип:</b> <input type="radio" id="color1" name="cena" value="12000" checked />Стандарт <input type="radio" id="color2" name="cena" value="13000" />Цвет<br/> <input type="radio" id="color3" name="cena" value="14000" />Стекляшки <input type="radio" id="color4" name="cena" value="15000" />Плитка <b> толщина</b> <input type="radio" id="tolsh1" name="toshina" value="0" checked />30 мм <input type="radio" id="tolsh2" name="toshina" value="1000" />40 мм<br/> <input type="radio" id="tolsh3" name="toshina" value="2000" />60 мм <input type="radio" id="tolsh4" name="toshina" value="5000" />80 мм <b> Бортик </b> <input type="radio" id="bort1" name="borti" value="0" checked />Без бортика <input type="radio" id="bort2" name="borti" value="1000" /> С прямоугольным бортиком<br/> <br/> <input type="checkbox" value="2000" id="dost" /> <label for="dost">Требуется доставка?</label> <br/> <input type="checkbox" value="5000" id="ust" /> <label for="ust">Требуется установка?</label> <br/> </div> <div class="calc-bg2"> Итого </div> <div class="calc-bgtotal"> Итого: <span id="result">0</span> руб.<br> </div> </form> <script> document.body.onload = function() { function calc2() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir").value, dlin1 = +d.getElementById("dlin").value, shir2 = +d.getElementById("shir01").value, dlin2 = +d.getElementById("dlin01").value, sq = ((shir1 * dlin1 / 1000000) + (shir2 * dlin2 / 1000000) - (shir1 * shir2 / 1000000)), color1 = d.getElementById("color1"), color2 = d.getElementById("color2"), color3 = d.getElementById("color3"), color4 = d.getElementById("color4"), tolsh1 = d.getElementById("tolsh1"), tolsh2 = d.getElementById("tolsh2"), tolsh3 = d.getElementById("tolsh3"), tolsh4 = d.getElementById("tolsh4"), bort1 = d.getElementById("bort1"), bort2 = d.getElementById("bort2"), dost = d.getElementById("dost"), ust = d.getElementById("ust"), result = d.getElementById("result"), kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000); }; document.form.onchange = calc2; calc2(); } </script> |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ГГ</title> </head> <body> <form id="form1" name="form"> <b> ширина:</b> <input id="shir1" type="text" value="5" /> <b>M<sup>2</sup></b> <b> длина:</b> <input id="dlin1" type="text" value="5" /> <b>M<sup>2</sup></b> <div class="calc-bgarea"> <b> Выберите тип:</b> <input type="radio" id="color11" name="cena" value="12000" checked />Стандарт <input type="radio" id="color12" name="cena" value="13000" />Цвет<br/> <input type="radio" id="color13" name="cena" value="14000" />Стекляшки <input type="radio" id="color14" name="cena" value="15000" />Плитка <b> толщина</b> <input type="radio" id="tolsh11" name="toshina" value="0" checked />30 мм <input type="radio" id="tolsh12" name="toshina" value="1000" />40 мм<br/> <input type="radio" id="tolsh13" name="toshina" value="2000" />60 мм <input type="radio" id="tolsh14" name="toshina" value="5000" />80 мм <b> Бортик </b> <input type="radio" id="bort11" name="borti" value="0" checked />Без бортика <input type="radio" id="bort12" name="borti" value="1000" /> С прямоугольным бортиком<br/> <br/> <input type="checkbox" value="2000" id="dost1" /> <label for="dost">Требуется доставка?</label> <br/> <input type="checkbox" value="5000" id="ust1" /> <label for="ust">Требуется установка?</label> <br/> </div> <div class="calc-bg2"> Итого </div> <div class="calc-bgtotal"> Итого: <span id="result1">0</span> руб.<br> </div> </form> <br><br><br><br> <form id="form2" name="form"> <b> ширина:</b> <input id="shir2" type="text" name="shir2" value="5" /> <b>M<sup>2</sup></b> <b> длина:</b> <input id="dlin2" type="text" name="dlin2" value="5" /> <b>M<sup>2</sup></b> <b> ширина1:</b> <input id="shir201" type="text" name="shir201" value="5" /> <b>M<sup>2</sup></b> <b> длина1:</b> <input id="dlin201" type="text" name="dlin201" value="5" /> <b>M<sup>2</sup></b> <div class="calc-bgarea"> <b> Выберите тип:</b> <input type="radio" id="color21" name="cena" value="12000" checked />Стандарт <input type="radio" id="color22" name="cena" value="13000" />Цвет<br/> <input type="radio" id="color23" name="cena" value="14000" />Стекляшки <input type="radio" id="color24" name="cena" value="15000" />Плитка <b> толщина</b> <input type="radio" id="tolsh21" name="toshina" value="0" checked />30 мм <input type="radio" id="tolsh22" name="toshina" value="1000" />40 мм<br/> <input type="radio" id="tolsh23" name="toshina" value="2000" />60 мм <input type="radio" id="tolsh24" name="toshina" value="5000" />80 мм <b> Бортик </b> <input type="radio" id="bort21" name="borti" value="0" checked />Без бортика <input type="radio" id="bort22" name="borti" value="1000" /> С прямоугольным бортиком<br/> <br/> <input type="checkbox" value="2000" id="dost2" /> <label for="dost">Требуется доставка?</label> <br/> <input type="checkbox" value="5000" id="ust2" /> <label for="ust">Требуется установка?</label> <br/> </div> <div class="calc-bg2"> Итого </div> <div class="calc-bgtotal"> Итого: <span id="result2">0</span> руб.<br> </div> </form> <script> function calc1() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir1").value, dlin1 = +d.getElementById("dlin1").value, sq = (shir1 * dlin1 / 1000000), color1 = d.getElementById("color11"), color2 = d.getElementById("color12"), color3 = d.getElementById("color13"), color4 = d.getElementById("color14"), tolsh1 = d.getElementById("tolsh11"), tolsh2 = d.getElementById("tolsh12"), tolsh3 = d.getElementById("tolsh13"), tolsh4 = d.getElementById("tolsh14"), bort1 = d.getElementById("bort11"), bort2 = d.getElementById("bort12"), dost = d.getElementById("dost1"), ust = d.getElementById("ust1"), result = d.getElementById("result1"); // kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000); }; function calc2() { var d = document, price = tolshi = dostavka = ustanovka = bortik = 0; shir1 = +d.getElementById("shir2").value, dlin1 = +d.getElementById("dlin2").value, shir2 = +d.getElementById("shir201").value, dlin2 = +d.getElementById("dlin201").value, sq = ((shir1 * dlin1 / 1000000) + (shir2 * dlin2 / 1000000) - (shir1 * shir2 / 1000000)), color1 = d.getElementById("color21"), color2 = d.getElementById("color22"), color3 = d.getElementById("color23"), color4 = d.getElementById("color24"), tolsh1 = d.getElementById("tolsh21"), tolsh2 = d.getElementById("tolsh22"), tolsh3 = d.getElementById("tolsh23"), tolsh4 = d.getElementById("tolsh24"), bort1 = d.getElementById("bort21"), bort2 = d.getElementById("bort22"), dost = d.getElementById("dost2"), ust = d.getElementById("ust2"), result = d.getElementById("result2"); // kol = d.getElementById("kol"); if (color1.checked) price = +color1.value; if (color2.checked) price = +color2.value; if (color3.checked) price = +color3.value; if (color4.checked) price = +color4.value; if (tolsh1.checked) tolshi = +tolsh1.value; if (tolsh2.checked) tolshi = +tolsh2.value; if (tolsh3.checked) tolshi = +tolsh3.value; if (tolsh4.checked) tolshi = +tolsh4.value; if (bort1.checked) bortik = +bort1.value; if (bort2.checked) bortik = +bort2.value; if (dost.checked) dostavka = +dost.value; if (ust.checked) ustanovka = +ust.value result.innerHTML = Math.round(sq * (price + tolshi) + dostavka + ustanovka + bortik* dlin1/1000); }; document.forms[0].onchange = calc1; document.forms[1].onchange = calc2; console.log(document.forms[0]); console.log(document.forms[1]); </script> </body> </html> |
EmperioAf
Я вам так благодарен, скиньте мне свои реквизиты (номер карты, телефона и т.д.) mr.gminasuan@yandex.ru я хочу вас отблагодарить. |
Цитата:
document.forms[0].onchange document.forms[1].onchange и включил текстовые поля внутрь форм, чтобы и на них распространялось действие onchange Пишите код так, словно кому то нужно будет его постоянно расширять (добавлять функциональности) и тогда не придётся долго возиться с неработающим кодом. |
Часовой пояс GMT +3, время: 14:18. |