Javascript-форум - Вопрос для Инопланетной силы

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вопрос для Инопланетной силы (https://javascript.ru/forum/dom-window/84938-vopros-dlya-inoplanetnojj-sily.html)

Вопрос для Инопланетной силы

Есть форма с select'ами и прочими полями:

<form action="#" id="calc">
<select name="price1" id="adults">
	<option value="0">Кол-во взрослых</option>
	<option value="250">2</option>
	<option value="500">3</option>
	<option value="750">4</option>
</select>

<select name="price2" id="kids">
	<option value="0">Кол-во детей</option>
	<option value="250">2</option>
	<option value="500">3</option>
	<option value="750">4</option>
</select>

<h2>Кол-во посещений:</h2>
<div class="check-radio">
  <input type="radio" name="price3" value="200">
  <label>1</label>
</div>

<div class="check-radio">
  <input type="radio" name="price3" value="400">
  <label>2</label>
</div>

Итого: на <font id="persons"></font> людей, <font id="visits"></font> посещений, будет стоить: <output name="o" for="a b c d e f g">0</output> рублей.
</form>

Задача:
Как вывести в "Итого" значения:
- сложенных названий option в id="persons"
- сложенных названий label в id="visits"
- сложенные value любых полей в id="cost"

Пока что есть скрипт для сложения всех value но в тег <output> хотелось бы с помощью <font id="cost"></font> выводить

в процессе: https://jsfiddle.net/Georka/b8ps3uh9/3/

Почему <font>? Чем <span> плох?

document.getElementById('persons').textContent = persons;

Что такое for="a b c d e f g"? В for должны быть id элементов от которых зависит выводимое значение. Но особого смысла это не имеет - это только подсказка для скриптов, по каким значениям считать. Но считать должен скрипт. Само считаться ничего не будет.

WebMachine,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('#calc'),
                output = form.querySelector('output');

            function total() {
                var mens_price = +adults.value;
                var children_price = +kids.value;
                var day_price = +form.querySelector('[name^="price"]:checked').value;
                var sum = mens_price + children_price + day_price;
                output.innerHTML = sum;
                var num = (+adults.selectedOptions[0].text || 0) + (+kids.selectedOptions[0].text || 0)
                persons.textContent = num;
                var day = form.querySelector('[name^="price"]:checked').nextElementSibling.textContent;
                visits.textContent = day;
            }
            form.addEventListener('change', total);
            form.addEventListener('input', total);
        });
    </script>
</head>

<body>
    <form action="#" id="calc">
        <select name="price1" id="adults">
    <option value="0">Кол-во взрослых</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <select name="price2" id="kids">
    <option value="0">Кол-во детей</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <h2>Кол-во посещений:</h2>
        <div class="check-radio">
            <input type="radio" name="price3" value="200" checked="checked">
            <label>1</label>
        </div>
        <div class="check-radio">
            <input type="radio" name="price3" value="400">
            <label>2</label>
        </div>
        <br> Итого: на
        <font id="persons"></font> людей,
        <font id="visits"></font> посещений, будет стоить: <output name="o" for="a b c d e f g">0</output> рублей.
    </form>
</body>

</html>

Цитата:

Сообщение от рони (Сообщение 550570)

КОД

Всё просто идеально ) , только можно вместо output выводить итоговую сумму также с помощью id ?

Цитата:

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

только можно вместо output выводить итоговую сумму также с помощью id ?

так добавьте id.

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('#calc');

            function total() {
                var mens_price = +adults.value;
                var children_price = +kids.value;
                var day_price = +form.querySelector('[name^="price"]:checked').value;
                var sum = mens_price + children_price + day_price;
                all_price.innerHTML = sum;
                var num = (+adults.selectedOptions[0].text || 0) + (+kids.selectedOptions[0].text || 0)
                persons.textContent = num;
                var day = form.querySelector('[name^="price"]:checked').nextElementSibling.textContent;
                visits.textContent = day;
            }
            form.addEventListener('change', total);
            form.addEventListener('input', total);
        });
    </script>
</head>

<body>
    <form action="#" id="calc">
        <select name="price1" id="adults">
    <option value="0">Кол-во взрослых</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <select name="price2" id="kids">
    <option value="0">Кол-во детей</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <h2>Кол-во посещений:</h2>
        <div class="check-radio">
            <input type="radio" name="price3" value="200" checked="checked">
            <label>1</label>
        </div>
        <div class="check-radio">
            <input type="radio" name="price3" value="400">
            <label>2</label>
        </div>
        <br> Итого: на
        <font id="persons"></font> людей,
        <font id="visits"></font> посещений, будет стоить: <output name="o" for="a b c d e f g" id='all_price'>0</output> рублей.
    </form>
</body>

</html>

Цитата:

Сообщение от рони (Сообщение 550573)

так добавьте id

Рони спасибо )