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），而是返回一个集合。线索在方法的名称中，getElement s ByName。

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

pi@raspberrypi:~/workspace/v4l-utils $ v4l2-ctl -d /dev/video0 Couldn't open the directory: No such file or directory pi@raspberrypi:~ $ v4l2-ctl -d /dev/video1 --list-formats-ext ioctl: VIDIOC_ENUM_FMT Index : 0 Type : Video Capture Pixel Format: 'MJPG' (compressed) Name : Motion-JPEG Size: Discrete 1920x1080 Interval: Stepwise 0.033s - 0.117s with step 0.017s (8.571-30.000 fps) Size: Discrete 1280x720 Interval: Stepwise 0.033s - 0.117s with step 0.017s (8.571-30.000 fps) Size: Discrete 1280x960

Answer 2

另一种选择是将document.getElementById()用于单个元素而不是document.getElementsByName()：

<script type="text/javascript">
function calc()
{
  var value1 = parseFloat(document.getElementById('lecturePerHour').value);
  var value2 = parseFloat(document.getElementById('tutorialPerHour').value);
  var value3 = parseFloat(document.getElementById('lectureWorkTime').value);
  var value4 = parseFloat(document.getElementById('tutorialWorkTime').value);

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

Answer 3

这是我最新的代码，对我很有用。表格代码：

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

Javascript代码：

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

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

谢谢你们之前回答我的问题，非常感谢。

在laravel框架中求和并乘以文本框

3 个答案: