javascript - 使用 Javascript 将 HTML 表单中的 2 个输入相乘

Question

我有一个 HTML 表单。在我的模板中，用户输入添加并显示在Total Monthly Expense使用 id中的每月费用的值Total3。

我已经包含了另一个输入，其中包含用户要包含的月数。我试图将Total Monthly Expense与用户输入的月数相乘，而无需添加提交按钮或刷新overhead_total。

我试图获取内部元素，但它给了我一个错误，因为最初还没有计算总数。

我的后端是 Django。

这是 HTML 模板：

                <h5>2. Working capital calculation</h5>
                <table class="table table-hover text-nowrap table-borderless">
                  <thead>
                    <tr>
                      <th scope="col">Monthly Cost</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <input
                          placeholder="Type in the Monthly Cost"
                          autocomplete="off"
                          type="text"
                          class="form-control"
                          name="item_11"
                          id="item_11"
                          {% if form.is_bound %}value="{{ form.item_11.value }}"{% endif %}/>
                          {% for err in form.item_11.errors %}
                            <small class="text-danger mb-2 ml-2">{{ err }}</small>
                          {% endfor %}
                      </td>
                      <td>
                        <h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
                        <input
                          autocomplete="off"
                          type="number"
                          class="form-control w-25 subtotal-group subtotal-group-3"
                          name="item_11_amount"
                          id="item_11_amount"
                          style="float:left"
                          {% if form.is_bound %}value="{{ form.item_11_amount.value }}"{% endif %}/>
                          {% for err in form.item_11_amount.errors %}
                            <small class="text-danger mb-2 ml-2">{{ err }}</small>
                          {% endfor %}
                      </td>
                    </tr>
                    <thead class="table-light">
                      <tr>
                        <th scope="col">Total Monthly Expense</th>
                        <th scope="col" id="Total3"></th>
                      </tr>
                    </thead>
                    <tr>
                      <td>
                        <h6>How many months do you think you’ll need to cover your overhead?</h6>
                      </td>
                      <td>
                        <input
                          autocomplete="off"
                          type="number"
                          class="form-control w-25"
                          name="no_months"
                          id="no_months"
                          style="float:left"
                          {% if form.is_bound %}value="{{ form.no_months.value }}"{% endif %}/>
                          {% for err in form.no_months.errors %}
                            <small class="text-danger mb-2 ml-2">{{ err }}</small>
                          {% endfor %}
                      </td>
                    </tr>
                    <thead class="table-light">
                      <tr>
                        <th scope="col">Total Overhead required over indicated period</th>
                        <th scope="col" id="overhead_total"></th>
                      </tr>
                    </thead>

这是脚本

    <script>
    const q=(e,n=document)=>n.querySelector(e);
    const qa=(e,n=document)=>n.querySelectorAll(e);
    const results={};
    console. log(results)
    qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){

      results[ this.name ]=Number( this.value );

      const resultGroupSet3 = [...qa('.subtotal-group-3')]
                              .map(s => Number(s.value))
                              .reduce((a,v) => a+v);
      q('th#Total3').textContent = resultGroupSet3;

      console.log('results', results);
    }));
    </script>

标签： javascripthtml

Answer 1

我们又见面了，A_K！

由于resultGroupSet3是一个数字，您可以立即从no_months输入中获取值，将其乘以该结果集，然后从那里设置适当的元素：

const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console. log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){

  results[ this.name ]=Number( this.value );

  const resultGroupSet3 = [...qa('.subtotal-group-3')]
                          .map(s => Number(s.value))
                          .reduce((a,v) => a+v);
  q('th#Total3').textContent = resultGroupSet3;

  //Push out the result of multiplying the number of months with the result subtotal
  q('th#overhead_total').textContent = Number(q('#no_months').value) * resultGroupSet3;

  console.log('results', results);
}));

如果您对乘法感到奇怪，请将乘法行包含在一组括号中并调用.toFixed()它来控制显示的小数位数：

q('th#overhead_total').textContent = (Number(q('#no_months').value) * resultGroupSet3).toFixed(2);