javascript - Laravel 框架中文本框的求和与相乘

Question

目前我正在使用 Laravel 框架做我的项目，我只是一个初学者。我有一个问题:当我对文本框求和并相乘时，我的程序不显示结果。我想知道我的代码是否正确。这是我的表单代码:

<div class="form-group">
        <strong>Rate Lecture Per Hour (RM) :</strong>
        {!! Form::text('lecturePerHour', null, array('placeholder' => 'Rate Lecture Per Hour (RM)','class' => 'form-control', 'id' => 'lecturePerHour', 'onkeyup' => 'calc()')) !!}
    </div>
    <div class="form-group">
        <strong>Rate Tutorial Per Hour (RM) :</strong>
        {!! Form::text('tutorialPerHour', null, array('placeholder' => 'Rate Tutorial Per Hour (RM)','class' => 'form-control', 'id' => 'tutorialPerHour', 'onkeyup' => 'calc()')) !!}
    </div>
    <div class="form-group">
        <strong>Total Working Hour per Month (Lecture) :</strong>
        {!! Form::text('lectureWorkTime', null, array('placeholder' => 'Total Working Hour (Lecture)','class' => 'form-control', 'id' => 'lectureWorkTime', 'onkeyup' => 'calc()')) !!}
    </div>
    <div class="form-group">
        <strong>Total Working Hour per Month (Tutorial) :</strong>
        {!! Form::text('tutorialWorkTime', null, array('placeholder' => 'Total Working Hour (Tutorial)','class' => 'form-control', 'id' => 'tutorialWorkTime', 'onkeyup' => 'calc()')) !!}
    </div>
    <div class="form-group">
        <strong>Total Salary Per Month (RM) :</strong>
        {!! Form::text('totalSalary', null, array('placeholder' => 'Total Salary Per Month (RM)','class' => 'form-control', 'id' => 'totalSalary')) !!}
    </div>

这是我的 Javascript 代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    function calc()
    {
      var value1 = parseFloat(document.getElementsByName('lecturePerHour').value);
      var value2 = parseFloat(document.getElementsByName('tutorialPerHour').value);
      var value3 = parseFloat(document.getElementsByName('lectureWorkTime').value);
      var value4 = parseFloat(document.getElementsByName('tutorialWorkTime').value);

      var result = (value1*value3)+(value2*value4);
      document.getElementsByName('totalSalary').value = result;
    }
    </script>

请帮助我。谢谢。

Answer 1

问题是 getElementsByName不返回单个元素(如 getElementById)，而是返回一个集合。线索就在方法的名称中，getElementsByName。

由于您可能想要第一个或唯一一个具有此类名称的元素，因此请取出该集合的第零个元素，即:

var value1 = parseFloat(document.getElementsByName('lecturePerHour')[0].value);