时间戳

首页 > 解决方案 > 使用按钮计算表单的值

javascript - 使用按钮计算表单的值

问题描述

作为我的第一个项目之一，我正在制作一个表格，通过使用选定的表格“type='radio'”来计算“money straps”。我要做的是在选择“购买”按钮时获取选定的输入并计算它们。我想它需要一个函数来使这成为可能我只是不知道从哪里开始以及如何将这些值实现到这个计算中。我唯一知道的是数学应该是“（denom * strap）* times”。任何开始的地方将不胜感激。提前感谢，如果我不够具体，我很抱歉，但我希望我想要做的事情能被理解。截至目前，我没有仅编写 HTML 设置的 javascript。

<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;
}

标签： javascripthtmlfunctionbutton

解决方案

尝试以下解决方案，

<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>

推荐阅读