Форум

fantom2359 · #1 (**permalink**) 13.06.2016, 17:03

Доброго времени суток.
Вот, с недавнего времени начал изучать js... честно говоря голова кипит от него. Но задание есть и делать его надо.
Задание состоит вот в чем:

Есть 9 RadioButton (сеансы), каждый RadioButton - это цена за сеанс. Текстовое поле, где нужно писать количество заказываемых билетов.
И кнопка (общая цена) вместе с текстовым полем, при нажатии на кнопку, в текстовое окно выводится общая сумма заказа.

Другими словами, я выбираю сеанс (9:00) - его цена 100 р., и 4 билета, т.е при нажатии кнопки "Общая сумма" в текстовое поле выводиться 400 рублей.

Ну как то так )

Прошу помощи в написании самого скрипта

Вот как это все выглядит

Вот сам код формы!

<FORM name="form1">
	<table align="center">
		<tr>
		<td align="center" border="1" bgcolor="blue">
			Утренний сеанс<br>
      <input type="radio" name="seans" value="100" checked>09:00
      <input type="radio" name="seans" value="120" checked>11:20
      <input type="radio" name="seans" value="140" checked>13:30
	</td>
		<td align="center" border="1" bgcolor="green">
			Дневной сеанс<br>
      <input type="radio" name="seans" value="160" checked>15:40
      <input type="radio" name="seans" value="200" checked>17:10
      <input type="radio" name="seans" value="220" checked>19:30
	</td>
		<td align="center" border="1" bgcolor="orange">
			Вечерний сеанс<br>
      <input type="radio" name="seans" value="250" checked>21:50
      <input type="radio" name="seans" value="280" checked>01:10
      <input type="radio" name="seans" value="350" checked>03:40
</td>
      </tr>
	</table>
	<p align="center">Кол-во билетов:<INPUT type="text"    name="num1"  size=5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT type="button"  value="Общая цена" onClick="sumballl()"> <INPUT  type="text"    name="sumb"  size=5></p><br>
<p align="center"><INPUT type="button" value="Оплатить" onClick="sumbat()" class="my_button"></p>

</td>
  </tr>


</table>

Прошу вашей помощи в написании самого скрипта

рони · #2 (**permalink**) 13.06.2016, 17:59

fantom2359,
не создавайте темы в этом разделе, есть Общие вопросы Javascript

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   p{
     text-align: center;
     padding: 4px;
   }
  .my_button{
    margin: 24px;
  }

 </style>

</head>

<body>
<form name="form1">
	<table align="center">
		<tr>
		<td align="center" border="1" bgcolor="blue">
			Утренний сеанс<br>
      <input type="radio" name="seans" value="100" checked>09:00
      <input type="radio" name="seans" value="120" >11:20
      <input type="radio" name="seans" value="140" >13:30
	</td>
		<td align="center" border="1" bgcolor="green">
			Дневной сеанс<br>
      <input type="radio" name="seans" value="160" >15:40
      <input type="radio" name="seans" value="200" >17:10
      <input type="radio" name="seans" value="220" >19:30
	</td>
		<td align="center" border="1" bgcolor="orange">
			Вечерний сеанс<br>
      <input type="radio" name="seans" value="250" >21:50
      <input type="radio" name="seans" value="280" >01:10
      <input type="radio" name="seans" value="350" >03:40
</td>
      </tr>
	</table>
	<p>
	<label>Кол-во билетов:<INPUT type="text"    name="num1"  size=5></label>
    <label>Общая цена <INPUT  type="text"    name="sumb"  size=5 readonly="readonly"></label><br>
    <INPUT type="button" value="Оплатить" onClick="sumbat()" class="my_button"></p>


</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('[name="form1"]'),
  num = document.querySelector('[name="num1"]'),
  sum = document.querySelector('[name="sumb"]');
  function sumballl()
  {
  var chec = document.querySelector('[name="seans"]:checked');
  sum.value = (num.value = +num.value||0) * (chec.value||0)
  }
  form.addEventListener('change', sumballl);
  form.addEventListener('input', sumballl);
    });
</script>
</body>
</html>

fantom2359 · #3 (**permalink**) 13.06.2016, 18:31

Извиняюсь, не зал. На этом форуме только сегодня зарегистрировался.
Спасибо огромное за помощь! Очень благодарен вам

Форум

Справочник

Discord чат

Курсы javascript