Question

我正在为我的网站项目使用MEAN堆栈。前端是一个简单的注册表单，要求输入多个用户。例如，它说＆＃34;您购买了多少产品？＆＃34;接下来的问题是一个单选按钮。它说这个产品大还是小？我的问题如下：获得订单成本的计算是#products * 42 +（如果选择大则为12）或＃products * 42 +（如果选择小则为0）。我如何在javascript中编写代码（我在后端使用节点）。换句话说，如何告诉我的计算代码当用户选择单选按钮时，您需要添加以下数字，以及如何传递键入我的公式的产品数量？我已经开始为small指定value = 1，为大单选按钮选项指定value = 2。只是一个一般的例子会有所帮助，因为我可以编码细节并在解决这个问题后更新公式。谢谢

Answer 1

如果要在客户端进行计算，并且元素采用HTML形式，如：

<h1>Radio Buttons</h1>
<form name="catch-radio" method="post">
  <div class="input">
    <span class="label">How many products are you buying?</span>
    <input id="product-count" type="text" name="product_count" value="0"/>
    <br/>
    <span class="label">Is this product large or small?</span>
    <br/>
    <span class="label">Large</span>
    <input type="radio" name="product-size" value="12" checked="checked"/>
    <br/>
    <span class="label">Small</span>
    <input type="radio" name="product-size" value="0"/>
  </div>
</form>
<div>
  <h2>Cost of order:</h2>
  <p id="calculation"></p>
</div>

输入产品数量（ID为＆＃39;产品数量＆＃39;）和与产品尺寸对应的单选按钮（名为＆＃39;产品尺寸＆＃39;），您可以计算成本并将其输出到页面上的元素（ID为＆＃39;计算＆＃39;），方法是在表单字段中添加事件处理程序以在表单中注册更改，然后从调用表单的处理程序中输出函数来执行计算并相应地更新页面：

// Cost is the count of products purchased multipled by 42 then added
// to 12 in the case that the product is large, and zero in the case
// that the product is small
function calculate_cost() {
    let count = parseInt(document.getElementById('product-count').value);
    if (count > 0) {
        let size = 0;
        for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
            if (document.getElementsByName('product-size')[i].checked) {
                    size = parseInt( document.getElementsByName('product-size')[i].value);
                    break;
            }
        }

        let cost = count * 42 + size
        document.getElementById('calculation').innerHTML = cost;
    }
}

// handlers for form input change
// call calculate_cost() on change
// note that the text input is an on-change event but for radio buttons
// an onclick handler is needed for each button
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
    document.getElementsByName('product-size')[i].onclick = function() { 
        calculate_cost(); 
    }
}
document.getElementById('product-count').onchange = function() { 
    calculate_cost(); 
}

我在CodePen上对此进行了快速演示：http://codepen.io/P1xt/pen/yOKqXP/

特别有趣的是，对于单选按钮，您需要单独为每个按钮添加一个单击处理程序（并且它必须是单击而不是更改处理程序，并且要确定当前选择了哪个单选，您需要明确检查每一个，看看是否已经检查过。

注意：如果您希望在服务器端进行计算，则需要提交表单，然后按顺序从提交的表单元素中收集产品数量和产品大小执行计算。

Answer 2

为什么不使用0和12作为单选按钮的值，那么后端只能添加所选的值？

基于单选按钮选择的计算

2 个答案: