javascript - 从表单传递 id 值并显示结果

Question

我正在尝试将表单输入中的值传递给脚本并进行计算。即从#no_of_rounds, #specific_round, #analysis_report_pages,#analysis_report_slides到使用document.getElementById().value. 一个人将从轮数中选择一个值并与指定的轮数相乘，即 10。然后将结果添加到来自分析报告、页面和分析报告、幻灯片的给定数字。

document.querySelector('.form').addEventListener('change', function() {
  const nr = +document.getElementById('no_of_rounds').value || 0;
  const sr = +document.getElementById('specific_round').value || 0;
  const arp = +document.getElementById('analysis_report_pages').value || 0;
  const ars = +document.getElementById('analysis_report_slides').value || 0;

  arp = 40;
  ars = 20;


  if (nr == 1) {
    const total = (90 * sr) + ar + ars;
  } else if (nr == 2) {
    const total = (90 * sr) + ar + ars;
  } else if (nr == 3) {
    const total = (100 * sr) + ar + ars;
  } else if (nr == 4) {
    const total = (110 * sr) + ar + ars;
  }
  document.getElementById('total').value = total;
});

<div class="form">
  <form method="POST" action="{{ route('register') }}">


    <table class="table">
      <tr>
        <th class="text-muted h5">Number of Rounds</th>
        <td>
          <select class="form-control" name="no_of_rounds" required="" id="no_of_rounds">

            <option style="background-color:skyblue;">Select no. of Rounds</option>
            <option value="1">1st Round</option>
            <option value="2">2nd Round</option>
            <option value="3">3rd Round</option>
            <option value="4">4th Round</option>
            <option value="5">5th Round</option>
            <option value="6">6th Round</option>
            <option value="7">7th Round</option>
            <option value="8">8th Round</option>
          </select>
        </td>

      </tr>
      <tr>
        <th class="text-muted h5">Specific Rounds</th>
        <td><input type="number" name="specific_round" id="specific_round" placeholder="Specific Rounds" class="form-control"></td>
      </tr>
      <tr>
        <th class="text-muted h5">Analysis Report, Pages</th>
        <td><input type="number" name="analysis_report_pages" id="analysis_report_pages" placeholder="Analysis Report, Pages" class="form-control"></td>
      </tr>
      <tr>
        <th class="text-muted h5">Analysis Report, Slides</th>
        <td><input type="number" name="analysis_report_slides" id="analysis_report_slides" placeholder="Analysis Report, Slides" class="form-control"></td>
      </tr>

      <tr>
        <th class="text-muted h5">Total</th>
        <td>
          <input type="text" name="total" id="total" class="bg-dark  text-white border-0">
        </td>
      </tr>
    </table>
    <!-- Email Address -->
  </form>
</div>

问题：不，任何值都被传递和计算。请帮助

标签： javascripthtmljquery

Answer 1

问题是，你在 if else 刹车中多次定义了 var 总数。

var 只存在于刹车内，刹车后不能使用。

而且您必须将值从字符串转换为数字，然后nr == 1 才能工作： nr = parseInt(nr,10);

尝试这个：

document.querySelector('.form form').addEventListener('change', function() {
  var nr = +document.getElementById('no_of_rounds').value || 0;
  var sr = +document.getElementById('specific_round').value || 0;
  var ar = +document.getElementById('analysis_report_pages').value || 0;
  var ars = +document.getElementById('analysis_report_slides').value || 0;
  nr = parseInt(nr,10);
  ar = 40;
  ars = 20;
  
  sr = 20;

  var total=0;

  if (nr == 1) {
     total = (90 * sr) + ar + ars;
   
  } else if (nr == 2) {
     total = (90 * sr) + ar + ars;
  } else if (nr == 3) {
     total = (100 * sr) + ar + ars;
  } else if (nr == 4) {
     total = (110 * sr) + ar + ars;
  }
  document.getElementById('total').value = total;
});

<div class="form">
  <form method="POST" action="{{ route('register') }}">


    <table class="table">
      <tr>
        <th class="text-muted h5">Number of Rounds</th>
        <td>
          <select class="form-control" name="no_of_rounds" required="" id="no_of_rounds">

            <option style="background-color:skyblue;">Select no. of Rounds</option>
            <option value="1">1st Round</option>
            <option value="2">2nd Round</option>
            <option value="3">3rd Round</option>
            <option value="4">4th Round</option>
            <option value="5">5th Round</option>
            <option value="6">6th Round</option>
            <option value="7">7th Round</option>
            <option value="8">8th Round</option>
          </select>
        </td>

      </tr>
      <tr>
        <th class="text-muted h5">Specific Rounds</th>
        <td><input type="number" name="specific_round" id="specific_round" placeholder="Specific Rounds" class="form-control"></td>
      </tr>
      <tr>
        <th class="text-muted h5">Analysis Report, Pages</th>
        <td><input type="number" name="analysis_report_pages" id="analysis_report_pages" placeholder="Analysis Report, Pages" class="form-control"></td>
      </tr>
      <tr>
        <th class="text-muted h5">Analysis Report, Slides</th>
        <td><input type="number" name="analysis_report_slides" id="analysis_report_slides" placeholder="Analysis Report, Slides" class="form-control"></td>
      </tr>

      <tr>
        <th class="text-muted h5">Total</th>
        <td>
          <input type="text" name="total" id="total" class="bg-dark  text-white border-0">
        </td>
      </tr>
    </table>
    <!-- Email Address -->
  </form>
</div>