Javascript-форум - Каклькулятор

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Каклькулятор (https://javascript.ru/forum/misc/71539-kaklkulyator.html)

Каклькулятор

Подскажите, пожалуйста, писала скрипт ( калькулятор для магазина), подключаю и не работает, подскажите, что не так
Нужно узнать цену книги, зависящую от размера страниц,цвета страниц,количества разворотов ,вид обложки,переплет, тираж

var button = document.getElementById("button_count");
button.onclick = function(){
var size = document.getElementById("page_size").value,
page_color = document.getElementById("color").value,
page_num = document.getElementById("qty").value,
cover=document.getElementById("cover").value,
binding = document.getElementById("binding").value,
edit = document.getElementById("edition").value,
price_size = 0,
price_color = 0,
price_cover = 0,
price_binding = 0;

switch(size){
case "A4" : price_size = 4.15;
break;
case "A5" : price_size = 4;
break;
case "A6" : price_size = 3.10;
break;
case "gen": price_size = 2.15;
break;
}

switch(page_color) {
case "bw" : price_color = 1.20;
break;
case "col" : price_color = 2.45;
break;
}

switch(cover) {
case "bw" : price_cover = 10;
break;
case "col" : price_cover = 12;
break;
case "sk" : price_cover = 16;
break;
case "lam" : price_cover = 21.20;
break;
}

switch(binding) {
case "soft" : price_binding = 14;
break;
case "solid" : price_binding = 21;
break;
case "staples" : price_binding = 12;
break;
case "spring" : price_binding = 32;
break;
}

var ans = (price_size*page_num + price_color + price_cover + price_binding)*edit;
document.getElementById("out").innerHTML = ans + "руб";
alert("подключен");

Код форматировать надо. Все это можно упростить. Похоже что switch проверяется значения выпадающих списков? HTML код покажите.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="charset" content="windws-1251">
<script src="2.js"></script>
</head>

<body>
<h1>Калькулятор расчета стоимости печати книги в типографии</h1>

<div class="form-group" style="margin-bottom: 15px;">
<label for="page-size">Размер страницы</label>
<select id="page-size" class="form-control">
<option selected>Выберите размер страницы</option>
<option value="A4">A4(205*202мм)</option>
<option value="A5">A5(145*200мм)</option>
<option value="A6">A6(100*140мм)</option>
<option value="gen">Формат(200*200мм)</option>
</select>
</div>

<div class="form-group" style="margin-bottom: 15px;">
<label for="color">Цвет страниц</label>
<select id="color" class="form-control">
<option selected>Выберите цвет страниц</option>
<option value="bw">Черно-белые</option>
<option value="col">Цветные</option>
</select>
</div>

<div class="form-group" style="margin-bottom: 15px;">
<label for="qty">Количество разворотов</label>
<input class="form-control" type="number" name="num" size="3" min="1" value="1" id="qty">
</select>
</div>

<div class="form-group" style="margin-bottom: 15px;">
<label for="cover">Вид обложки</label>
<select id="cover" class="form-control">
<option selected>Выберите вид обложки</option>
<option value="bw">Черно-белая</option>
<option value="col">Цветная</option>
<option value="sk">Под кожу с тиснением</option>
<option value="lam">Ламинация</option>
</select>
</div>

<div class="form-group" style="margin-bottom: 15px;">
<label for="binding">Переплет</label>
<select id="binding" class="form-control">
<option selected>Выберите переплет</option>
<option value="soft">Мягкий</option>
<option value="solid">Твердый</option>
<option value="staples">Сшить скобами</option>
<option value="spring">Пружина</option>
</select>
</div>

<div class="form-group" style="margin-bottom: 15px;">
<label for="edition">Тираж</label>
<input class="form-control" type="number" name="num" size="10" min="1" value="1" id="edition">
</div>
</select>
</div>

<div class="form-group" style="margin-bottom: 15px;">
<input type="button" id="button_count" value="Посчитать">
</div>
<div class="form-group" style="margin-bottom: 15px;">
<label for="out">Cтоимость :</label>
<output id="out"></output>

</div>

KATRIN1786492,
нет элементов с которыми работает скрипт, или скрипт в load или вниз страницы.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

var button = document.getElementById("button_count"); 
button.onclick = function(){ 
var size = document.getElementById("page_size").value, 
page_color = document.getElementById("color").value, 
page_num = document.getElementById("qty").value, 
cover=document.getElementById("cover").value, 
binding = document.getElementById("binding").value, 
edit = document.getElementById("edition").value, 
price_size = 0, 
price_color = 0, 
price_cover = 0, 
price_binding = 0; 


switch(size){ 
case "A4" : price_size = 4.15; 
break; 
case "A5" : price_size = 4; 
break; 
case "A6" : price_size = 3.10; 
break; 
case "gen": price_size = 2.15; 
break; 
} 

switch(page_color) { 
case "bw" : price_color = 1.20; 
break; 
case "col" : price_color = 2.45; 
break; 
} 

switch(cover) { 
case "bw" : price_cover = 10; 
break; 
case "col" : price_cover = 12; 
break; 
case "sk" : price_cover = 16; 
break; 
case "lam" : price_cover = 21.20;
break; 
} 

switch(binding) { 
case "soft" : price_binding = 14; 
break; 
case "solid" : price_binding = 21;
break; 
case "staples" : price_binding = 12; 
break; 
case "spring" : price_binding = 32; 
break; 
} 

var ans = (price_size*page_num + price_color + price_cover + price_binding)*edit; 
document.getElementById("out").innerHTML = ans + "руб";
alert("подключен");

У поля типа number нужно обрабатывать событие onchange (также нужно учитывать, что в данное поле можно и непосредственно вводить). Расчет производить только если во всех списках есть выбор, какой смысл ноль показывать?

Но это не главное. Лучше все определить объектом получая данные из него по выбору в списках. А еще лучше прописать все зависимости в data атрибутах опций списков. Эти данные ведь сервером определяются, а инфляция ..., значит проще менять цены в самих списках при выводе формы, а не изменять в скриптах.

PS. О типе nember снимается, кнопка расчета это не оно. :)

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

Цитата:

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

вы не могли бы написать ?

Напишу, с учетом, что данные необходимые содержит форма (почему, пояснение выше).

Но есть еще один момент. Все расчеты на клиенте, это сугубо для него. Но если магазин и нужно обрабатывать заказ, то форма отправляется серверу. Сервер же сам обязан не только просчитать, но еще и проверить истинность входных данных. Дело конечно хозяйское, но хранить в базе значения которые определяются как "bw", "col", "sk", и т.п., это не самое лучшее, что можно было бы сделать. Это усложняет проверку входных данных сервером, так как требуется запрос в базу. Держать же на сервере, а тем более такие вещи, вне базы определяя их еще где либо, это вообще плохо. Как ни крути, а цены, курсы ..., к сожалению не являются постоянными, а значит требуют редактирования.

Просто подумайте над этим.

Это мне для университета)
Нужно каждому создать свой сайт, я создаю сайт магазина)

Цитата:

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

Это мне для университета

А что так плохо учимся, не изучаем материал? )

Я не знаю что там думают в университетах, но вы разрабатываете проект для реального магазина. А это означает, что вы должны продумывать все, включая и вопросы проектирования базы данных, без нее магазина не будет. А разработчик думающий ни за что не будет описывать данные в базе так, как вы при думали. С чем это связано я говорил. Сервер с клиентом, это одна связка, если каждый будет сам по себе, один другому будут отдавать данные под чем угодно выдуманным, то второму придется попотеть разбирая их. У вас уже есть ошибка - два поля формы отвечающие за разное имеют одно и тоже имя - name="num". При этом поля списков их не имеют, а только идентификаторы, которые в общем то здесь не нужны.

Лишнее удалено из полей, добавлено нужное. Данные для расчета содержатся в полях формы (защищая проект обосновывайте почему).

Это форма:

<form autocomplete="off" id="calc">
<div class="form-group" style="margin-bottom: 15px;"> 
<label>Размер страницы</label> 
<select name="size" class="form-control"> 
    <option selected value="" disabled>Выберите размер страницы</option> 
    <option value="A4" data-price="4.15">A4(205*202мм)</option> 
    <option value="A5" data-price="4">A5(145*200мм)</option> 
    <option value="A6" data-price="3.10">A6(100*140мм)</option> 
    <option value="gen" data-price="2.15">Формат(200*200мм)</option> 
</select>
</div> 

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Цвет страниц</label> 
<select name="color" class="form-control"> 
    <option selected value="" disabled>Выберите цвет страниц</option> 
    <option value="bw" data-price="1.20">Черно-белые</option> 
    <option value="col" data-price="2.45">Цветные</option> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Количество разворотов</label> 
    <input class="form-control" type="number" name="turn" size="3" min="1" value="1"> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Вид обложки</label> 
<select name="cover" class="form-control"> 
    <option selected value="" disabled>Выберите вид обложки</option> 
    <option value="bw" data-price="10">Черно-белая</option> 
    <option value="col" data-price="12">Цветная</option> 
    <option value="sk" data-price="16">Под кожу с тиснением</option> 
    <option value="lam" data-price="21.20">Ламинация</option> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Переплет</label> 
<select name="binding" class="form-control"> 
    <option selected value="" disabled>Выберите переплет</option> 
    <option value="soft" data-price="14">Мягкий</option> 
    <option value="solid" data-price="21">Твердый</option> 
    <option value="staples" data-price="12">Сшить скобами</option> 
    <option value="spring" data-price="32">Пружина</option> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<label>Тираж</label> 
    <input class="form-control" type="number" name="circulat" size="10" min="1" value="1"> 
</div> 
</select> 
</div>

<div class="form-group" style="margin-bottom: 15px;"> 
<input type="button" id="calculate" value="Посчитать"> 
</div>
<div class="form-group" style="margin-bottom: 15px;"> 
<label>Cтоимость :</label> 
<output id="total"></output>
</form>

Вообще-то формы для заказа, а попутно и рассчитать, а значит форма должна отправляться, у вас этого нет. Хотя что подразумевается под магазином в вашем случае не знаю, чего вы там планируете.

Скриптов два - первый вариант, это автоматический просчет при выборе в полях формы (кнопка Посчитать не нужна), второй выбором по кнопке Посчитать.

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('#calc').addEventListener("change", function() {
        var size =  this.elements.namedItem('size'),
            color = this.elements.namedItem('color'),
            cover = this.elements.namedItem('cover'),
            binding = this.elements.namedItem('binding'),
            result = this.elements.namedItem('total');
            
        result.value = ""; //очистить поле расчета 
        
        if(!size.value || !color.value || !cover.value || !binding.value) return; //если нет выбора в списках
        
        result.value = ((
            parseFloat(size.options[size.selectedIndex].attributes['data-price'].value) 
            * 
            this.elements.namedItem('turn').valueAsNumber 
            +
            parseFloat(color.options[color.selectedIndex].attributes['data-price'].value) 
            + 
            parseFloat(cover.options[cover.selectedIndex].attributes['data-price'].value) 
            +
            parseFloat(binding.options[binding.selectedIndex].attributes['data-price'].value)
        ) * this.elements.namedItem('circulat').valueAsNumber).toFixed(2);
    });
});

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('#calc').addEventListener("change", function() {
        document.querySelector('#total').value = ""; //очистить поле расчета
    });
    
    document.querySelector('#calculate').addEventListener("click", function() {
        var fields = document.querySelector('#calc').elements,
            size =  fields.namedItem('size'),
            color = fields.namedItem('color'),
            cover = fields.namedItem('cover'),
            binding = fields.namedItem('binding'),
            result = fields.namedItem('total');
            
        if(!size.value || !color.value || !cover.value || !binding.value) { //если нет выбора в списках
            alert("Не во всех полях формы сделан выбор!");
            return;     
        }
        
        result.value = ((
            parseFloat(size.options[size.selectedIndex].attributes['data-price'].value) 
            * 
            fields.namedItem('turn').valueAsNumber 
            +
            parseFloat(color.options[color.selectedIndex].attributes['data-price'].value) 
            + 
            parseFloat(cover.options[cover.selectedIndex].attributes['data-price'].value) 
            +
            parseFloat(binding.options[binding.selectedIndex].attributes['data-price'].value)
        ) * fields.namedItem('circulat').valueAsNumber).toFixed(2);
    });
});