为什么我的视图给了我这个 typeError 函数？

Question

您好，我在 laravel 项目的刀片视图中实现了一个脚本，我收到以下错误：

“TypeError：折扣不是函数”

我在一个新的 index.html 文件中尝试了我的代码，该文件不是 laravel 项目，它确实可以工作，所以我的问题可能与 mi Blade 视图有关。

以下是我的观点，里面有我的脚本：

    @extends('backend.layouts.master')
    @section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper bg-white">
    <!--Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm 6">
                    <h1 class="m-0 text-white"></h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">Detalle Presupuestos</li>
                    </ol>
                </div><!-- /.col-->
             </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main Content -->
    <section class="content">
     <div class="container-fluid">
     <!-- Main Row -->
         <div class="row">
        <!-- Left Col -->
        <section class="col-md-12">
            <!-- Custom Tabs -->
            <div class="card">
                <div class="card-header text-white"  style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);">
                    <h3 class="font-weight-lighter">Agregar Detalle de Presupuesto
                        <a href="{{ route('presupuestos-productos.view') }}" class="btn bg-white float-right btn-sm">
                            <i class="fa fa-list"></i>
                            Detalles
                        </a>
                    </h3>
                </div><!-- /.Card Header -->
                <div class="card-body">
                    <form method="post" action="{{ route('presupuestos-productos.store') }}" id="myForm" enctype="multipart/form-data">
                        @csrf
                    <div class="form-row">
                        
                        <div class="form-group col-md-3">
                            <label for="presupuesto_id">Presupuesto</label>
                            <select name="presupuesto_id" class="form-control">
                              <option value="">Seleccionar</option>
                              @foreach ($presupuestos as $presupuesto)
                              <option value="{{ $presupuesto->id }}">{{ $presupuesto->id }}</option>
                              @endforeach
                            </select>
                        </div>
                       
                        <div class="form-group col-md-3">
                            <label for="product_id">Producto</label>
                            <select name="product_id" class="form-control">
                              <option value="">Seleccionar</option>
                              @foreach ($products as $product)
                              <option value="{{ $product->id }}">{{ $product->id }}</option>
                              @endforeach
                            </select>
                        </div>                     
                        
                       
                    
                        

                        <div class="form-group col-md-2">
                            <label for="sale_price">Precio de Venta</label>
                            <input type="number"  pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" onkeyup="discount()" onchange="discount();" >
                        </div>



                        
                        <div class="form-group col-md-3">
                            <label for="discount_percentage">Porcentaje de descuento (%)</label>
                            <input type="number" name="discount_percentage" class="form-control" id="discountP" onkeyup="discount();" onchange="discount();">
                        </div>

                        <div class="form-group col-md-3">
                            <label for="discount">Descuento</label>
                            <input type="number" name="discount" placeholder="discount" id="discountAmount" class="form-control"  >
                        </div>        

                      

                    

                        <div class="form-group col-md-12">
                        <input type="submit" value="Agregar" class="btn btn-md text-white" style="background:#030335e8">
                        </div>
                    </div>

                </form>
                </div><!-- /.card-body-->
            </div>
            <!-- /.card -->
        </section>
        <!-- right col -->
        </div>
        <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->


    <script>
    
    
        function discount(){
            const price = document.getElementById('saleP').value;
            const percentage = document.getElementById('discountP').value;
            const discount = (price* percentage)/100
            document.getElementById('discountAmount').value = discount; 
        }
    
    </script>


    <script type="text/javascript">
      $(document).ready(function (){
        $('#myForm').validate({
          rules:{
            category_id: {
                required: true,
            },
            ptype_id: {
                required: true,
            },
            model: {
                required: true,
            },
            brand: {
                required: true,
            },
          },
          messages: {
    
              category_id: {
                  required: "Debe ingresar una categoria",
              },
              ptype_id: {
                  required: "Debe ingresar tipo de producto",
              },
              model: {
                  required: "Debe ingresar un modelo",
              },
              brand: {
                  required: "Debe ingresar una marca",
              },
              brand: {
                  required: "Debe ingresar una marca",
              }
          },
          errorElement: 'span',
          errorPlacement: function(error, element){
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass){
            $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass){
            $(element).removeClass('is-invalid');
          }
        });
      });
         
      
      </script>
    
    @endsection

第一个带有名为 discount 的函数的脚本是给我错误的脚本。第二个脚本是 jQuery 工作正常。

Answer 1

不要为多个对象使用相同的名称。这只是制造问题，所以：

function discount(){
    const price = document.getElementById('saleP').value;
    const percentage = document.getElementById('discountP').value;
    const discountValue = (price* percentage)/100
    document.getElementById('discountAmount').value = discountValue; 
}

您遇到的问题与输入的名称有关。如果您在 HTML 表单中使用 on{sth} 绑定，则 javascript 会将 this 绑定到表单。 discount 的形式不是函数，而是具有该名称的输入的值。 discount 是 window 对象中的一个函数。

要解决此问题，您可以尝试以下解决方案之一：

1. 直接在 JavaScript 中绑定事件（最佳方案，最佳实践）：

const discountPercentageInput = document.querySelector("input[name='discount_percentage']");

discountPercentageInput.addEventListener("keyup", discount);
discountPercentageInput.addEventListener("change", discount);
// and so on

1. 将函数重命名为文档中唯一的名称：

function calculateDiscount(){
    // your code
}

<input ... onkeyup="calculateDiscount()" onchange="calculateDiscount()">

1. 在 HTML 中使用 window.discount()（非常丑陋和糟糕的解决方案，但有效）：

<input ... onkeyup="window.discount()" onchange="window.discount()">