Расчет значений моей формы с помощью кнопки - PullRequest
Новая
       1

Расчет значений моей формы с помощью кнопки

0 голосов
/ 17 мая 2018

В качестве одного из моих первых проектов я работаю над формой для расчета «денежного ремня» с использованием выбранной формы «type = 'radio'». То, что я хочу сделать, это взять выбранные входы и рассчитать их, когда нажата кнопка «купить». я бы предположил, что потребуется функция, чтобы сделать это возможным, я просто не знаю, с чего начать и как включить значения в этот расчет. Единственное, что я знаю, это то, что математика должна быть "(деном * ремень) * раз". Любое место для начала будет высоко ценится. Спасибо заранее и извините, если я не был достаточно конкретен, но я надеюсь, что то, что я пытаюсь сделать, понято. На данный момент у меня нет javascript написано только настройки HTML. 

<html>

    <head>
        <h1 id='header'>
            <b>BUY MONEY</b>
        </h1>
    </head>

    <body id='body'>

        <form id='strapDenom'>
            <p id='p1'>
                <b>DENOMINATION</b>
            </p>
            <input type='radio' name='denom' value='100' checked> 1's<br>
            <input type='radio' name='denom' value='200'> 2's<br>
            <input type='radio' name='denom' value='500'> 5's<br>
            <input type='radio' name='denom' value='1000'> 10's<br>
            <input type='radio' name='denom' value='2000'> 20's<br>
            <input type='radio' name='denom' value='1000'> 50's<br>
            <input type='radio' name='denom' value='1000'> 100's<br>
        </form>

        <form id='strapCount'>
            <p id='p2'>
                <b>STRAP COUNT</b>
            </p>
            <input type='radio' name='strap' value='1' checked> 1<br>
            <input type='radio' name='strap' value='2'> 2<br>
            <input type='radio' name='strap' value='3'> 3<br>
            <input type='radio' name='strap' value='4'> 4<br>
            <input type='radio' name='strap' value='5'> 5<br>
            <input type='radio' name='strap' value='6'> 6<br>
            <input type='radio' name='strap' value='7'> 7<br>
            <input type='radio' name='strap' value='8'> 8<br>
            <input type='radio' name='strap' value='9'> 9<br>
            <input type='radio' name='strap' value='10'> 10<br>
        </form>

        <form id='multiply'>
            <p id='p3'>
                <b>MULTIPLE</b>
            </p>
            <input type='radio' name='times' value='1' checked> 1<br>
            <input type='radio' name='times' value='2'> 2<br>
            <input type='radio' name='times' value='3'> 3<br>
            <input type='radio' name='times' value='4'> 4<br>
            <input type='radio' name='times' value='5'> 5<br>
            <input type='radio' name='times' value='6'> 6<br>
            <input type='radio' name='times' value='7'> 7<br>
            <input type='radio' name='times' value='8'> 8<br>
            <input type='radio' name='times' value='9'> 9<br>
            <input type='radio' name='times' value='10'> 10<br>
        </form>

        <br>

        <button id='buy' onclick=''>BUY</button>
    </body>

</html>

Буду ли я использовать что-то вроде этого? 

function buyMoney() {
    var den = document.getElementById('denom').value;
    var str = document.getElementById('strap').value;
    var tim = document.getElementById('times').value;
document.getElementById('buy').innerHTML = den * str * tim;
}

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Сделайте это: 

var form = document.getElementById("strapDenom");
alert(form.elements["denom"].value);
var denom = form.elements["denom"].value;
var strap= form.elements["strap"].value;
var times= form.elements["times"].value;
var multiple = denom*strap*times;
0 голосов
/ 17 мая 2018

Я думаю, что ваша собственная функция правильная, вам просто нужно добавить var result = denom*strap*times и result должен содержать ваш результат. Добавьте свой OP или все, что вы хотите сделать с результатом, к функции, добавьте функцию в верхней части HTML, например, прямо над формой и активируйте свою функцию кнопкой.

0 голосов
/ 17 мая 2018

Попробуйте с приведенным ниже решением, 

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <h1 id='header'>
    <b>BUY MONEY</b>
  </h1>
  <script>
    function calculate() {
      var denom = $("input[name='denom']:checked").val();
      var strap = $("input[name='strap']:checked").val();
      var times = $("input[name='times']:checked").val();
      var finalPrice = (denom * strap) * times;
      $("#iblFinalPrice").html(finalPrice);
    }
  </script>
</head>

<body id='body'>
  <form id='strapDenom'>
    <p id='p1'>
      <b>DENOMINATION</b>
    </p>
    <input type='radio' name='denom' value='100' checked> 1's<br>
    <input type='radio' name='denom' value='200'> 2's<br>
    <input type='radio' name='denom' value='500'> 5's<br>
    <input type='radio' name='denom' value='1000'> 10's<br>
    <input type='radio' name='denom' value='2000'> 20's<br>
    <input type='radio' name='denom' value='1000'> 50's<br>
    <input type='radio' name='denom' value='1000'> 100's<br>
  </form>
  <form id='strapCount'>
    <p id='p2'>
      <b>STRAP COUNT</b>
    </p>
    <input type='radio' name='strap' value='1' checked> 1<br>
    <input type='radio' name='strap' value='2'> 2<br>
    <input type='radio' name='strap' value='3'> 3<br>
    <input type='radio' name='strap' value='4'> 4<br>
    <input type='radio' name='strap' value='5'> 5<br>
    <input type='radio' name='strap' value='6'> 6<br>
    <input type='radio' name='strap' value='7'> 7<br>
    <input type='radio' name='strap' value='8'> 8<br>
    <input type='radio' name='strap' value='9'> 9<br>
    <input type='radio' name='strap' value='10'> 10<br>
  </form>
  <form id='multiply'>
    <p id='p3'>
      <b>MULTIPLE</b>
    </p>
    <input type='radio' name='times' value='1' checked> 1<br>
    <input type='radio' name='times' value='2'> 2<br>
    <input type='radio' name='times' value='3'> 3<br>
    <input type='radio' name='times' value='4'> 4<br>
    <input type='radio' name='times' value='5'> 5<br>
    <input type='radio' name='times' value='6'> 6<br>
    <input type='radio' name='times' value='7'> 7<br>
    <input type='radio' name='times' value='8'> 8<br>
    <input type='radio' name='times' value='9'> 9<br>
    <input type='radio' name='times' value='10'> 10<br>
  </form>
  <br>
  <div> <b>Total Price :</b> <label id="iblFinalPrice"></label></div>
  <br>
  <button id='buy' onclick='calculate()'>BUY</button>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...