Форум

рони · #11 (**permalink**) 11.06.2013, 19:49

extravert,
для начала id это нечто уникальное оно в нормальном случае не повторятся на странице.

рони · #12 (**permalink**) 11.06.2013, 20:08

extravert,

<!DOCTYPE HTML>
<html>
    
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
    </head>
    
    <body>
        <script type="text/javascript">
            function calc() {

                var type_exp1 = document.getElementById("type_exp1");
                var type_exp2 = document.getElementById("type_exp2");
                var type_exp3 = document.getElementById("type_exp3");
                var type_exp4 = document.getElementsByName('type_exp4');
                var price = 0;
                for (var i = 0; i < type_exp4.length; i++)
                    if (type_exp4[i].checked) {
                        price += +type_exp4[i].value;
                    }

                document.getElementById("result_exp4").innerHTML = price;

                //Result

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

                var price_exp1 = 0;
                var price_exp2 = 0;
                var price_exp3 = 0;

                price_exp1 += (type_exp1.checked == true) ? parseInt(type_exp1.value) : 0;
                price_exp2 += (type_exp2.checked == true) ? parseInt(type_exp2.value) : 0;
                price_exp3 += (type_exp3.checked == true) ? parseInt(type_exp3.value) : 0;

                price += price_exp1 + price_exp2 + price_exp3;

                result_exp1.innerHTML = price_exp1;
                result_exp2.innerHTML = price_exp2;
                result_exp3.innerHTML = price_exp3;
                result.innerHTML = price;
            }
        </script>
        <table width="600">
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" onchange="calc()" value="1500" id="type_exp1" />test1</td>
                <td width="200"><span id="result_exp1">0</span> руб.</td>
            </tr>
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" onchange="calc()" value="1500" id="type_exp2" />test2</td>
                <td width="200"><span id="result_exp2">0</span> руб.</td>
            </tr>
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" onchange="calc()" value="1500" id="type_exp3" />test3</td>
                <td width="200"><span id="result_exp3">0</span> руб.</td>
            </tr>
            <tr>
                <td width="200">
                    <input type="radio" onchange="calc()" value="1000" name="type_exp4" />test4</td>
                <td width="200">
                    <input type="radio" onchange="calc()" value="1500" name="type_exp4" />test4</td>
                <td width="200">
                    <input type="radio" onchange="calc()" value="2000" name="type_exp4" />test4</td>
                <td width="200"><span id="result_exp4">0</span> руб.</td>
            </tr>
            <!-- Итог -->
            <tr>
                <td colspan="3" width="500" class="td_result">ИТОГО:</td>
                <td class="td_result"><span id="result">0</span> руб.</td>
            </tr>
        </table>
    </body>

</html>

extravert · #13 (**permalink**) 11.06.2013, 22:52

рони, ох, матерь богов! с id я скосяпорила, спору нет, списываю на помутнение рассудка и усталость.
Спасибо, огромное, мне теперь стало многое понятно. Я не смогла бы дойти своими методами проб и ошибок. Правильный пример очень важен. Плохо, когда не знаешь, да и не помнишь (

Kvark · #14 (**permalink**) 12.06.2013, 12:42

мелочи конечно но может избавиться от таблицы все же в пользу дивов?

А по теме - не понял вопроса - что нужно то? Заменить чек боксы на радио чтоли?

extravert · #15 (**permalink**) 12.06.2013, 21:02

Kvark, может быть и стоит перейти на div. Версия пока рабочая, мне как-то с таблицей нагляднее что ли...
А тема была в том, чтобы в калькуляторе сделать и чекбоксы и радио, с этим мне уже помогли.

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

Пробовала я так:

<!DOCTYPE HTML>
<html>
    
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
    </head>
    
    <body>
        <script type="text/javascript">
            function calc() {

                var type_exp1 = 

document.getElementById("type_exp1");
                var type_exp2 = 

document.getElementById("type_exp2");
                var type_exp3 = 

document.getElementById("type_exp3");
                var type_exp4 = 

document.getElementsByName('type_exp4');
                var price = 0;
                for (var i = 0; i < 

type_exp4.length; i++)
                    if (type_exp4[i].checked) {
                        price += +type_exp4

[i].value;
                    }

                document.getElementById

("result_exp4").innerHTML = price;

                //Result

                var result = 

document.getElementById("result");

                var price_exp1 = 0;
                var price_exp2 = 0;
                var price_exp3 = 0;

                price_exp1 += (type_exp1.checked 

== true) ? parseInt(type_exp1.value) : 0;
                price_exp2 += (type_exp2.checked 

== true) ? parseInt(type_exp2.value) : 0;
                price_exp3 += (type_exp3.checked 

== true) ? parseInt(type_exp3.value) : 0;

                price += price_exp1 + price_exp2 

+ price_exp3;

                result_exp1.innerHTML = 

price_exp1;
                result_exp2.innerHTML = 

price_exp2;
                result_exp3.innerHTML = 

price_exp3;
                result.innerHTML = price;
            }
         function time() { 
          if (type_exp1.checked){
var time_exp1=parseFloat(time_exp1.value);
}
else time_exp1=0;
          
          if (type_exp2.checked){
var time_exp2=parseFloat(time_exp2.value);
}
else time_exp2=0;
          
          if (type_exp3.checked){
var time_exp3=parseFloat(time_exp3.value);
}
else time_exp3=0;

var time = time_exp1 + time_exp2 + time_exp3;
document.getElementById("result_time").innerHTML=time;
 
         }
          
          
        </script>
        <table width="600">
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" 

onchange="calc()" value="1500" id="type_exp1" 

/>test1</td>
                <td width="200"><span 

id="result_exp1">0</span> руб.</td>
              
              <td width="200"><span 

id="time_exp1" value="10" name="time_exp1">10</span> мин.</td>
            </tr>
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" 

onchange="calc()" value="1500" id="type_exp2" 

/>test2</td>
                <td width="200"><span 

id="result_exp2">0</span> руб.</td>
              
              <td width="200"><span 

id="time_exp2" value="15" name="time_exp2">15</span> мин.</td>
              
            </tr>
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" 

onchange="calc()" value="1500" id="type_exp3" 

/>test3</td>
                <td width="200"><span 

id="result_exp3">0</span> руб.</td>
              
              <td width="200"><span 

id="time_exp3" value="20" name="time_exp3">20</span> мин.</td>
              
            </tr>
            <tr>
                <td width="200">
                    <input type="radio" 

onchange="calc()" value="1000" name="type_exp4" 

/>test4</td>
                <td width="200">
                    <input type="radio" 

onchange="calc()" value="1500" name="type_exp4" 

/>test4</td>
                <td width="200">
                    <input type="radio" 

onchange="calc()" value="2000" name="type_exp4" 

/>test4</td>
                <td width="200"><span 

id="result_exp4">0</span> руб.</td>
            </tr>
            <!-- Итог -->
            
          <tr>
                <td colspan="3" width="500" 

class="td_result_time">ВРЕМЯ:</td>
                <td class="td_time"><span 

id="result_time">0</span> мин.</td>
            </tr>
          
          
          <tr>
                <td colspan="3" width="500" 

class="td_result">ИТОГО:</td>
                <td class="td_result"><span 

id="result">0</span> руб.</td>
            </tr>
        </table>
    </body>

</html>

рони · #16 (**permalink**) 12.06.2013, 21:41

extravert,
1.есть такое понятие в javascript как видимость -- внутри функции time() невидно никаких type_exp1 потому что они в другой функции находятся calc()ю
2.время у вас в спане -- у него не value а innerHTML.
3вызова time нет нигде.
вариант -- в time определить по новой переменные или поместить time во внутрь calc .

<!DOCTYPE HTML>
<html>

    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
    </head>

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

                var type_exp1 =

                document.getElementById("type_exp1");
                var type_exp2 =

                document.getElementById("type_exp2");
                var type_exp3 =

                document.getElementById("type_exp3");
                var type_exp4 =

                document.getElementsByName('type_exp4');
                var price = 0;
                for (var i = 0; i <

                type_exp4.length; i++)
                    if (type_exp4[i].checked) {
                        price += +type_exp4

                        [i].value;
                    }

                document.getElementById

                ("result_exp4").innerHTML = price;

                //Result

                var result =

                document.getElementById("result");

                var price_exp1 = 0;
                var price_exp2 = 0;
                var price_exp3 = 0;

                price_exp1 += (type_exp1.checked

                == true) ? parseInt(type_exp1.value) : 0;
                price_exp2 += (type_exp2.checked

                == true) ? parseInt(type_exp2.value) : 0;
                price_exp3 += (type_exp3.checked

                == true) ? parseInt(type_exp3.value) : 0;

                price += price_exp1 + price_exp2

                + price_exp3;

                result_exp1.innerHTML =

                price_exp1;
                result_exp2.innerHTML =

                price_exp2;
                result_exp3.innerHTML =

                price_exp3;
                result.innerHTML = price;

                function time() {
                    var time_exp1 = document.getElementById("time_exp1");
                    var time_exp2 = document.getElementById("time_exp2");
                    var time_exp3 = document.getElementById("time_exp3");
                    if (type_exp1.checked) {
                        time_exp1 = parseFloat(time_exp1.innerHTML);
                    } else time_exp1 = 0;

                    if (type_exp2.checked) {
                        time_exp2 = parseFloat(time_exp2.innerHTML);
                    } else time_exp2 = 0;

                    if (type_exp3.checked) {
                        time_exp3 = parseFloat(time_exp3.innerHTML);
                    } else time_exp3 = 0;

                    var time = time_exp1 + time_exp2 + time_exp3;
                    document.getElementById("result_time").innerHTML = time;

                }
                time()
            }
        </script>
        <table width="600">
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" onchange="calc()" value="1500" id="type_exp1" />test1</td>
                <td width="200"><span id="result_exp1">0</span> руб.</td>
                <td width="200"><span id="time_exp1" value="10" name="time_exp1">10</span> мин.</td>
            </tr>
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" onchange="calc()" value="1500" id="type_exp2" />test2</td>
                <td width="200"><span id="result_exp2">0</span> руб.</td>
                <td width="200"><span id="time_exp2" value="15" name="time_exp2">15</span> мин.</td>
            </tr>
            <tr>
                <td colspan="3" width="500">
                    <input type="checkbox" onchange="calc()" value="1500" id="type_exp3" />test3</td>
                <td width="200"><span id="result_exp3">0</span> руб.</td>
                <td width="200"><span id="time_exp3" value="20" name="time_exp3">20</span> мин.</td>
            </tr>
            <tr>
                <td width="200">
                    <input type="radio" onchange="calc()" value="1000" name="type_exp4" />test4</td>
                <td width="200">
                    <input type="radio" onchange="calc()" value="1500" name="type_exp4" />test4</td>
                <td width="200">
                    <input type="radio" onchange="calc()" value="2000" name="type_exp4" />test4</td>
                <td width="200"><span id="result_exp4">0</span> руб.</td>
            </tr>
            <!-- Итог -->
            <tr>
                <td colspan="3" width="500" class="td_result_time">ВРЕМЯ:</td>
                <td class="td_time"><span id="result_time">0</span> мин.</td>
            </tr>
            <tr>
                <td colspan="3" width="500" class="td_result">ИТОГО:</td>
                <td class="td_result"><span id="result">0</span> руб.</td>
            </tr>
        </table>
    </body>

</html>

extravert · #17 (**permalink**) 12.06.2013, 21:55

рони, спасибо! сейчас тоже разбиралась сама, переместила time в calc(), вроде заработало, но где-то была ошибка. Показывалось NaN мин. Пока разбиралась, вы мне ответили. Сейчас сверюсь, где я сглупила.

Спасибо огромное, еще раз! Вы мне так помогаете )

рони · #18 (**permalink**) 12.06.2013, 21:59

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

Показывалось NaN мин

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

2.время у вас в спане -- у него не value а innerHTML.

extravert · #19 (**permalink**) 12.06.2013, 22:05

Да уж, поначалу легко запутаться

но я стараюсь)

extravert · #20 (**permalink**) 13.06.2013, 15:31

У меня еще вопрос. Как сделать зависимость всех элементов друг от друга. У меня 2 блока радио, время и количество, и много чекбоксов. Нужно сделать вывод суммы в зависимости от параметров время-колво. Т.е. если выбрано 30 мин и 5 человек, то сумма 1000р., 60 мин и 15 чел. - 1500р. и т.д. Но также от этого изменялась цена и у чекбоксов.

Я было попробовала вариант, но это совсем коряво и неудобно.

if (vremia1.checked && chel1.checked){
                        type_vremia = 333;
                    } else 
					
      if (vremia1.checked && chel2.checked) {
                        type_vremia = 444;
                    } else
					
      if (vremia1.checked && chel3.checked) {
                        type_vremia = 555;
                    } ;

Как это правильно организовать?

Попробовала так, вроде работает. Сделала привязку только к параметру количество (в принципе так и надо было)

price_exp1 += (type_exp1.checked 

== true && chel1.checked) ? parseInt(type_exp1.value) : 0;

price_exp1 += (type_exp1.checked 

== true && chel2.checked) ? parseInt(type_exp1.value)*2 : 0 ;

price_exp1 += (type_exp1.checked 

== true && chel3.checked) ? parseInt(type_exp1.value)*3 : 0 ;

Этот вариант вобщем подходит, т.к. чекбоксов у меня немного. А вот если бы много было, так же прописывать к каждому не очень удобно и громоздко. Просто интересуюсь, какими способами их можно обобщить в одно правило?

Форум

Справочник

Discord чат

Курсы javascript