Форум

kind82 · #1 (**permalink**) 05.08.2015, 21:30

Господа! Помогите!

В приведенном ниже коде калькулятора, шрифт переменных почему то не меняется.
Стиль текста я могу корректировать, а когда нажимаешь на чек бокс, цифра которая появляется, например "500" меняет шрифт на очень маленький

А если убрать галочку с чекбокса, то появляется цифра "0" то же с неконтролируемым мной стилем шрифта!
Как мне сделать так, чтобы шрифт был всегда одинаковый?

Вот код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
h1 {
font-family: Jura, sans-serif; /* Гарнитура шрифта */
font-size: 180%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>

<script type="text/javascript">

function calc() {

var type_zayava = document.getElementById("type_zayava");

var doc = document.getElementById("doc");

//Result

var result = document.getElementById("result_doc");
var result = document.getElementById("result");
var price_zayava = 0;
var price_doc = 0;
var price = 0;
price_zayava += (type_zayava.checked == true) ? parseInt(type_zayava.value) : 0;
price_doc += (doc.checked == true) ? parseInt(doc.value) : 0;
price=price_zayava + price_doc;

result_zayava.innerHTML = price_zayava;
result_doc.innerHTML = price_doc;
result.innerHTML = price;
}
</script>


<table>
<tr>
<td width="350"><h1>Заполнение заявления по установленной форме</h1> </td>
<td width="50" height="35"><input type="checkbox" onchange="calc()" value="500" id="type_zayava" /></td>
<td width="100"><span id="result_zayava"><h1>0</h1></span> <h1>руб.</h1></td>
</tr>

<tr>
<td width="350"><h1>Подготовка основных документов</h1></td>
<td width="50" height="35"><input type="checkbox" onchange="calc()" value="1000" id="doc" /></td>
<td width="100"><span id="result_doc"><h1>0</h1></span> <h1>руб.</h1></td>
</tr>


<tr>
<td width="50" height="300" class="td_result"><h1>ИТОГО:</h1></td>
<td class="td_result"><span id="result"><h1>0</h1></span><h1>руб.</h1></td>
</tr>
</table>
</body>
</html>

EmperioAf · #2 (**permalink**) 06.08.2015, 00:27

значения вы пишите в теги span. А для них размер шрифта не установлен.
Рекомендую почистить код от безобразия
(например такого:

var result = document.getElementById("result_doc");
var result = document.getElementById("result");

)
и обернуть весь код в

html

kind82 · #3 (**permalink**) 06.08.2015, 07:03

А как установить значения шрифта в теге span?

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

А как это обернуть в HTML?

kind82 · #4 (**permalink**) 06.08.2015, 07:05

И почему переменные
var result = document.getElementById("result_doc");
var result = document.getElementById("result");
в коде не нужны?

На них же ссылка в коде таблицы идет...

EmperioAf · #5 (**permalink**) 06.08.2015, 09:19

Сообщение от kind82

И почему переменные
var result = document.getElementById("result_doc");
var result = document.getElementById("result");
в коде не нужны?

потому что вы перезаписываете в переменную result значение повторно и строка

var result = document.getElementById("result_doc");

не имеет смысла.

EmperioAf · #6 (**permalink**) 06.08.2015, 09:31

Пометил красным, что изменено. Также нет стилей.(подключённых css файлов и тега <style>)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
</head>

<body>
<script type="text/javascript">
function calc() { 

var type_zayava = document.getElementById("type_zayava"); 
var doc = document.getElementById("doc"); 

//Result
*!*
var result_zayava = document.querySelector("#result_zayava h1");
var result_doc = document.querySelector("#result_doc h1");
var result = document.querySelector("#result h1");
*/!*
var price_zayava = 0;
var price_doc = 0;
var price = 0; 
price_zayava += (type_zayava.checked == true) ? parseInt(type_zayava.value) : 0;
price_doc += (doc.checked == true) ? parseInt(doc.value) : 0;
price=price_zayava + price_doc;

result_zayava.innerHTML = price_zayava;
result_doc.innerHTML = price_doc;
result.innerHTML = price;
} 
</script>

<!--Minimum-->
<table>
<tr>
<td width="350"><h1>Заполнение заявления по установленной форме</h1> </td>
<td width="50" height="35"><input type="checkbox" onchange="calc()" value="500" id="type_zayava" /></td>
<td width="100"><span id="result_zayava"><h1>0</h1></span> <h1>руб.</h1></td>
</tr>

<tr>
<td width="350"><h1>Подготовка основных документов</h1></td>
<td width="50" height="35"><input type="checkbox" onchange="calc()" value="1000" id="doc" /></td>
<td width="100"><span id="result_doc"><h1>0</h1></span> <h1>руб.</h1></td>
</tr>


<!-- Итог --> 
<tr>
<td width="50" height="300" class="td_result"><h1>ИТОГО:</h1></td>
<td class="td_result"><span id="result"><h1>0</h1></span><h1>руб.</h1></td>
</tr>
</table>

</body> 
</html>

kind82 · #7 (**permalink**) 06.08.2015, 20:01

Спасибо огромное за ответ!

Я разобрался сам))) Сделал чуток по другому.

Можно еще вопрос? Как сделать так, чтобы выбранные варианты и их общая стоимость могли быть отправлены клиентом на мою почту?
Я знаю что нужно прописать в коде форму отправки и как то зацепить на нее результаты.

А вот кстати как я сейчас сделал:

<html>
<head>
<meta charset="utf-8">
<title>font-size</title>
<style>
h1 {
font-family: 'Jura'; /* Гарнитура текста */
font-size: 11pt; /* Размер шрифта в пунктах */
}
h2 {
font-family: 'Jura'; /* Гарнитура текста */
font-size: 12pt; /* Размер шрифта в пунктах */
}
</style>
</head>
<h1>
<script type="text/javascript">

function calc() {

var zayava = document.getElementById("zayava");
var doc = document.getElementById("doc");
var notarius = document.getElementById("notarius");
var stat = document.getElementById("stat");
var uvedomleniya = document.getElementById("uvedomleniya");
var bill = document.getElementById("bill");
var truddir = document.getElementById("truddir");
var trudrab = document.getElementById("trudrab");
var dolzdir = document.getElementById("dolzdir");
var dolzrab = document.getElementById("dolzrab");
var poltrud = document.getElementById("poltrud");
var polkom = document.getElementById("polkom");
var pravila = document.getElementById("pravila");
var buhsop = document.getElementById("buhsop");
var kadry = document.getElementById("kadry");
var pechat = document.getElementById("pechat");

//Result

var price_zayava = 0;
var price_doc = 0;
var price_notarius = 0;
var price_uvedomleniya = 0;
var price_stat = 0;
var price_bill = 0;
var price_truddir = 0;
var price_trudrab = 0;
var price_dolzdir = 0;
var price_dolzrab = 0;
var price_poltrud = 0;
var price_polkom = 0;
var price_pravila = 0;
var price_buhsop = 0;
var price_kadry = 0;
var price_pechat = 0;

var price = 0;
price_zayava += (zayava.checked == true) ? parseInt(zayava.value) : 0;
price_doc += (doc.checked == true) ? parseInt(doc.value) : 0;
price_notarius += (notarius.checked == true) ? parseInt(notarius.value) : 0;
price_uvedomleniya += (uvedomleniya.checked == true) ? parseInt(uvedomleniya.value) : 0;
price_stat += (stat.checked == true) ? parseInt(stat.value) : 0;
price_bill += (bill.checked == true) ? parseInt(bill.value) : 0;
price_truddir += (truddir.checked == true) ? parseInt(truddir.value) : 0;
price_trudrab += (trudrab.checked == true) ? parseInt(trudrab.value) : 0;
price_dolzdir += (dolzdir.checked == true) ? parseInt(dolzdir.value) : 0;
price_dolzrab += (dolzrab.checked == true) ? parseInt(dolzrab.value) : 0;
price_poltrud += (poltrud.checked == true) ? parseInt(poltrud.value) : 0;
price_polkom += (polkom.checked == true) ? parseInt(polkom.value) : 0;
price_pravila += (pravila.checked == true) ? parseInt(pravila.value) : 0;
price_buhsop += (buhsop.checked == true) ? parseInt(buhsop.value) : 0;
price_kadry += (kadry.checked == true) ? parseInt(kadry.value) : 0;
price_pechat += (pechat.checked == true) ? parseInt(pechat.value) : 0;
price=price_zayava + price_doc + price_notarius + price_uvedomleniya + price_stat + price_bill + price_truddir + price_trudrab + price_dolzdir + price_dolzrab + price_poltrud + price_polkom + price_pravila + price_buhsop + price_kadry + price_pechat;

result_zayava.innerHTML = price_zayava;
result_doc.innerHTML = price_doc;
result_notarius.innerHTML = price_notarius;
result_uvedomleniya.innerHTML = price_uvedomleniya;
result_stat.innerHTML = price_stat;
result_bill.innerHTML = price_bill;
result_truddir.innerHTML = price_truddir;
result_trudrab.innerHTML = price_trudrab;
result_dolzdir.innerHTML = price_dolzdir;
result_dolzrab.innerHTML = price_dolzrab;
result_poltrud.innerHTML = price_poltrud;
result_polkom.innerHTML = price_polkom;
result_pravila.innerHTML = price_pravila;
result_buhsop.innerHTML = price_buhsop;
result_kadry.innerHTML = price_kadry;
result_pechat.innerHTML = price_pechat;
result.innerHTML = price;
}
</script>


<table>
<tr>
<td width="650" height="40">Заполнение заявления по установленной законом форме</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="500" id="zayava" /></td>
<td width="50"><span id="result_zayava">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Нотариальное заверение заявления в ИФНС</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="notarius" /></td>
<td width="40"><span id="result_notarius">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подача и получение документов из ИФНС</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="doc" /></td>
<td width="40"><span id="result_doc">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Изготовление печати юрлица</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="pechat" /></td>
<td width="40"><span id="result_pechat">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Открытие расчетного счета (банк по выбору клиента)</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="bill" /></td>
<td width="40"><span id="result_bill">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Получение уведомлений о постановке на учет из Пенсионного фонда и Фонда социального страхования</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="uvedomleniya" /></td>
<td width="40"><span id="result_uvedomleniya">0</span></td>
<td width="50">руб.</td>
</tr>

<tr>
<td width="650" height="40">Получение письма Госстата о присвоении кодов</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="stat" /></td>
<td width="40"><span id="result_stat">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Ежемесячное бухгалтерское обслуживание (стоимость в месяц)</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="buhsop" /></td>
<td width="40"><span id="result_buhsop">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Ведение кадрового учета работников (стоимость за одно дело)</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="kadry" /></td>
<td width="40"><span id="result_kadry">0</span></td>
<td width="50">руб.</td>
</tr>




<tr>
<td width="650" height="40">Подготовка трудового договора с руководителем</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="truddir" /></td>
<td width="40"><span id="result_truddir">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подготовка одного трудового договора с работником (любой специальности)</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="trudrab" /></td>
<td width="40"><span id="result_trudrab">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подготовка должностной инструкции руководителя</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="dolzdir" /></td>
<td width="40"><span id="result_dolzdir">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подготовка должностной инструкции работника</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="dolzrab" /></td>
<td width="40"><span id="result_dolzrab">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подготовка положения об оплате труда</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="poltrud" /></td>
<td width="40"><span id="result_poltrud">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подготовка положения о коммерческой тайне</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="polkom" /></td>
<td width="40"><span id="result_polkom">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="650" height="40">Подготовка правил трудового распордка компании</td>
<td width="50" height="40"><input type="checkbox" onchange="calc()" value="1000" id="pravila" /></td>
<td width="40"><span id="result_pravila">0</span></td>
<td width="50">руб.</td>
</tr>


<tr>
<td width="300"> </td>
<td width="60" height="60" class="td_result"><h2>ИТОГО:</h2></td>
<td class="td_result"><span id="result">0</span></td>
<td width="60">руб.</td>
</tr>
</table>
</h1>
</html>

kind82 · #8 (**permalink**) 06.08.2015, 20:03

Прямо таки жаба давит за выложенный код!

EmperioAf · #9 (**permalink**) 06.08.2015, 20:33

Сообщение от kind82

Можно еще вопрос? Как сделать так, чтобы выбранные варианты и их общая стоимость могли быть отправлены клиентом на мою почту?

вам нужно на серверном языке этого прописать. Из серверных языком php самый простой, и поэтому я вам рекомендую его использовать.
Т.е.

<form action="mail.php">
    ....
  <input type="submit" value="Отправить письмо" />
</form>

и в файле mail.php осуществлять отправку письма.
P.s. оборачивайте свой код в html для читаемости

Rise · #10 (**permalink**) 07.08.2015, 05:46

kind82, не обязательно в каждой строке таблицы ячейкам размеры указывать достаточно в первой строке определить.

Форум

Справочник

Discord чат

Курсы javascript