Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужна помощь с калькулятором (https://javascript.ru/forum/dom-window/38975-nuzhna-pomoshh-s-kalkulyatorom.html)

рони 13.06.2013 18:03
extravert,
Вариант...через селекторы
<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8">
  <title>Untitled</title>
  <script>
window.onload = function () {
    var data = {
        'time': ['30 мин.', '60 мин.', '120 мин.'],
        'sum': [1000, 2000, 4000]
    },
    men = {
        'number': ['5 чел.', '10 чел.', '15 чел.', '20 чел.'],
        'ratio': [1, .9, .75, .6]
    }

        function set_select(name, arr_text, arr_val) {
            var select = document.getElementsByName(name)[0];
            select.options.length = 0;
            for (var k = 0; k < arr_val.length; k++) {
                select.options[k] = new Option(arr_text[k], arr_val[k]);
            }
        }
  var t = document.getElementsByName('time')[0],
  m = document.getElementsByName('men')[0];

        function change_select() {
            document.getElementsByTagName('span')[0].innerHTML = t.value * m.value + " руб."
        }
    set_select('time', data['time'], data['sum'])
    set_select('men', men['number'], men['ratio'])
    change_select()
    t.addEventListener('change', change_select);
    m.addEventListener('change', change_select);
}
</script>
</head>

<body>
<select name="time">
</select>
<select name="men">
</select>
<span></span>
</body>

</html>

extravert 13.06.2013 19:57
Да, наверное, с селекторами было бы лучше, но задача изначально стоит оформить это через радио. Вот с ними у меня как раз и не получается. Мне нужно, чтобы в выводе "время" был коэффициент, в зависимости от количества участников. А в участниках цену, я думаю, вообще бы убрать для вывода. Пока что не получается. Вот такой код имею сейчас.

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

var type_exp1 = document.getElementById("type_exp1");
var type_exp2 = document.getElementById("type_exp2");
    
var type_vremia = document.getElementsByName('type_vremia');
                var prices = 0;
                for (var i = 0; i < type_vremia.length; i++)
                    if (type_vremia[i].checked) {
                        prices += +type_vremia[i].value;	
					}
					
document.getElementById("result_vremia").innerHTML = prices;      

var type_kolichestvo = document.getElementsByName('type_kolichestvo');
                var price = 0;
                for (var i = 0; i < type_kolichestvo.length; i++)
                    if (type_kolichestvo[i].checked) {
                    price += +type_kolichestvo[i].value;
                    }

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

    //Result

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

                var price_exp1 = 0;
                var price_exp2 = 0;
   
prices += (vremia1.checked == true && chel1.checked) ? parseInt(vremia1.value) : 0;

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

prices += (vremia1.checked == true && chel3.checked) ? parseInt(vremia1.value)*3 : 0;
    
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 ;
    
price_exp2 += (type_exp2.checked == true && chel1.checked) ? parseInt(type_exp2.value) : 0;

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

price_exp2 += (type_exp2.checked == true && chel3.checked) ? parseInt(type_exp2.value)*3 : 0 ;    
    
price += price_exp1 + price_exp2 + prices;    
    
result_exp1.innerHTML = price_exp1;
result_exp2.innerHTML = price_exp2;

    result.innerHTML = price;
     }
        </script>

<table width="640">
    <tbody>
    <tr>
            <td colspan="4"><span>ПРОДОЛЖИТЕЛЬНОСТЬ:</span></td>
        </tr>
        <tr>
            <td width="100">
            <div class="radio"><input type="radio" onchange="calc()" value="4500" name="type_vremia" id="vremia1" checked="checked"><label for="vremia1">30 минут</label></div>
            </td>
            <td width="100">
            <div class="radio"><input type="radio" id="vremia2" name="type_vremia" value="5500" onchange="calc()"><label for="vremia2">60 минут</label></div>
            </td>
            <td width="100">
            <div class="radio"><input type="radio" onchange="calc()" value="6500" name="type_vremia" id="vremia3"><label for="vremia3">90 минут</label></div>
            </td>
            <td "width="70"><span id="result_vremia">0</span> руб.</td>
        </tr>
        <tr>
            <td colspan="4"><span>КОЛИЧЕСТВО УЧАСТНИКОВ:</span></td>
        </tr>
        <tr>
            <td width="100"><div class="radio"><input type="radio" onchange="calc()" value="1000" name="type_kolichestvo" id="chel1" checked="checked" ><label for="chel1">5 человек</label></div></td>
            <td width="100"><div class="radio"><input type="radio" id="chel2" name="type_kolichestvo" value="1500" onchange="calc()"><label for="chel2">10 человек</label></div></td>
            <td width="100"><div class="radio"><input type="radio" onchange="calc()" value="2000" name="type_kolichestvo" id="chel3"><label for="chel3">15 человек</label></div></td>
            <td "width="70"><span id="result_kolichestvo">0</span> руб.</td>
        </tr>
        <tr>
            <td colspan="4"><span>СПИСОК:</span></td>
        </tr>
        <tr>
            <td colspan="3"><div class="checkbox"><input type="checkbox" id="type_exp1" value="1000" onchange="calc()" name="check"><label for="type_exp1">111</label></div>
            </td>
            <td width="70"><span id="result_exp1">0</span> руб.</td>
        </tr>
        <tr>
            <td colspan="3"><div class="checkbox"><input type="checkbox" onchange="calc()" value="1000" id="type_exp2" name="check"><label for="type_exp2">222</label></div>
            </td>
            <td width="70"><span id="result_exp2">0</span> руб.</td>
        </tr>

      <!-- Итог -->
      <tr>
            <td class="td_result" colspan="3"><span>ОБЩАЯ СТОИМОСТЬ:</span></td>
            <td width="100" class="td_result"><span id="result">0</span><span> руб.</span></td>
            <td>&nbsp;</td>
        </tr>
    </tr>
</table>

рони 13.06.2013 20:19
extravert,
составьте сначала таблицу или три строки с результатами
время/чел 5 10 15
30
60
90
чтобы знать что вы хотите

extravert 13.06.2013 20:46
рони, вот такая таблица :)


а вот так, я хочу, чтобы получилось

рони 13.06.2013 23:05
extravert,
:cray: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
span{
   position: relative;
   left: 300px
}
p {
  width: 300px;
  text-align: center;
}
  </style>

</head>

<body>
 <div id="show" >
 <p>ПРОДОЛЖИТЕЛЬНОСТЬ:</p>
 <label><input name="time" type="radio" value="30" checked="checked">30 мин.</label>
 <label><input name="time" type="radio" value="60">60 мин.</label>
 <label><input name="time" type="radio" value="90">90 мин.</label>
 <p>КОЛИЧЕСТВО УЧАСТНИКОВ:</p>
 <label><input name="men" type="radio" value="0" checked="checked">5  чел.</label>
 <label><input name="men" type="radio" value="1">10 чел.</label>
 <label><input name="men" type="radio" value="2">15 чел.</label><br>
 <span id="result0">0 руб.</span>
 <p>СПИСОК:</p>
 <label><input name="exp1" type="checkbox" value="3000">111</label>
 <span id="result1">0 руб.</span>
 <br>
 <label><input name="exp2" type="checkbox" value="1000">222</label>
 <span id="result2">0 руб.</span>
 <p>ОБЩАЯ СТОИМОСТЬ:</p>
 <span id="result3">0 руб.</span>
 </div>

 <script>

function check(name)
{
  var name = document.getElementsByName(name);
  for (var i = 0; i < name.length; i++)
  if (name[i].checked) return +name[i].value;
  return 0
}
function id(n)
{
    return document.getElementById('result'+n)
}
function calc()
{
  var sum = {
  '30':[1000,2000,3000],
  '60':[1500,3000,4500],
  '90':[2000,4000,6000]
}
  var rez = sum[check('time')][check('men')];
  id(0).innerHTML = rez+" руб.";
  var exp = check('exp1');
  id(1).innerHTML = exp+" руб.";
  rez += exp;
  exp = check('exp2');
  rez += exp;
  id(2).innerHTML = exp+" руб.";
  id(3).innerHTML = rez+" руб.";
}
var div = document.getElementById('show');
div.addEventListener('click', calc);
calc()
</script>
</body>

</html>

extravert 13.06.2013 23:24
рони, ого! я такого пока не знаю... думала тут можно обойтись простыми способами... Спасибо большое, сейчас буду разбираться, что тут почем) Ночь еще молода)

extravert 14.06.2013 18:08
Я, конечно, понимаю, что уже надоела, но у меня возник еще вопрос :)

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

<p>МЕСТО ПРОВЕДЕНИЯ:</p>
 <label><input name="km" type="radio" value="0" checked="checked">В городе</label>
 <label><input name="km" type="radio" value="0">За городом</label>
 <label><select id="type">
	<option disabled selected>удаленность</option>
	<option value="10">10 км.</option>
	<option value="20">15 км.</option>
</select></label><br>
 <span id="result_km">0 руб.</span>


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

{ 
  var km = document.getElementsByName('km');
                var dalnost = 0;
                for (var i = 0; i < km.length; i++)
                    if (km[i].checked) {
                      dalnost += +km[i].value;	
					}
					
                document.getElementById("result_km").innerHTML = dalnost+" руб."; 
  }

рони 16.06.2013 14:11
extravert,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
span{
   position: relative;
   left: 300px
}
p {
  width: 300px;
  text-align: center;
}
  </style>

</head>

<body>
 <div id="show" >
 <p>ПРОДОЛЖИТЕЛЬНОСТЬ:</p>
 <label><input name="time" type="radio" value="30" checked="checked">30 мин.</label>
 <label><input name="time" type="radio" value="60">60 мин.</label>
 <label><input name="time" type="radio" value="90">90 мин.</label>
 <p>КОЛИЧЕСТВО УЧАСТНИКОВ:</p>
 <label><input name="men" type="radio" value="0" checked="checked">5  чел.</label>
 <label><input name="men" type="radio" value="1">10 чел.</label>
 <label><input name="men" type="radio" value="2">15 чел.</label><br>
 <span id="result0">0 руб.</span>
 <p>СПИСОК:</p>
 <label><input name="exp1" type="checkbox" value="3000">111</label>
 <span id="result1">0 руб.</span>
 <br>
 <label><input name="exp2" type="checkbox" value="1000">222</label>
 <span id="result2">0 руб.</span>
 <p>МЕСТО ПРОВЕДЕНИЯ:</p>
 <label><input name="km" type="radio" value="0" checked="checked">В городе</label>
 <label><input name="km" type="radio" value="1">За городом</label>
 <p>УДАЛЁННОСТЬ:</p>
 <select id="path">
	<option value="10">10 км.</option>
	<option value="20">15 км.</option>
</select>
 <span id="result3">0 руб.</span>
 <p>ОБЩАЯ СТОИМОСТЬ:</p>
 <span id="result4">0 руб.</span>
 </div>

 <script>

function check(name)
{
  var name = document.getElementsByName(name);
  for (var i = 0; i < name.length; i++)
  if (name[i].checked) return +name[i].value;
  return 0
}
function id(n)
{
    return document.getElementById('result'+n)
}
var div = document.getElementById('show');
var sel = document.getElementById('path');
function calc()
{
  var sum = {
  '30':[1000,2000,3000],
  '60':[1500,3000,4500],
  '90':[2000,4000,6000]
}
  var rez = sum[check('time')][check('men')];
  id(0).innerHTML = rez+" руб.";
  var exp = check('exp1');
  id(1).innerHTML = exp+" руб.";
  rez += exp;
  exp = check('exp2');
  rez += exp;
  id(2).innerHTML = exp+" руб.";
  exp = 0;
  if(check('km')) {
    exp = +sel.value
  }
  id(3).innerHTML = exp+" руб.";
  rez += exp;
  id(4).innerHTML = rez+" руб.";
}

div.addEventListener('click', calc);
sel.addEventListener('change', calc);
calc()
</script>
</body>

</html>

extravert 17.06.2013 17:05
рони,
спасибо огромное! все получилось! )


Часовой пояс GMT +3, время: 01:58.
Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице