为什么我的观点给了我这个TypeError函数?

hi im在Laravel项目中实现刀片视图中的脚本,我收到以下错误:

“TypeError:折扣不是函数”

我在一个新的index.html文件中尝试了我的代码,这不是Laravel项目和它确实有效,所以我的问题可能是mi刀片视图的东西。

以下是我的脚本内部的视图:

    @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

名为折扣功能的第一个脚本是给我错误的脚本。和jQuery的第二个脚本工作正常。

回答 1

  1. 赞同 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; 
    }
    

    您遇到的问题与输入名称有关。如果你使用on{sth}以HTML表单绑定,JavaScript将绑定this表格。在形式discountis不是函数,但是使用该名称的输入值。discountIS中的功能windowObject。

    解决问题,您可以尝试其中一个解决方案:

    1. 直接在JavaScript中的事件(最佳解决方案,最佳实践):
    const discountPercentageInput = document.querySelector("input[name='discount_percentage']");
    
    discountPercentageInput.addEventListener("keyup", discount);
    discountPercentageInput.addEventListener("change", discount);
    // and so on
    
    1. RENAME函数在文档中唯一的功能:
    function calculateDiscount(){
        // your code
    }
    
    <input ... onkeyup="calculateDiscount()" onchange="calculateDiscount()">
    
    1. 使用window.discount()在HTML(非常丑陋和糟糕的解决方案,但工作):
    <input ... onkeyup="window.discount()" onchange="window.discount()">
    

    Adrian Kokot
    i dont understand should i use this or this Matuco1998
    To resolve the issue you can try 那些Solutions,但如果你在那两个之间奇异,那么第一个有重命名功能的人会更好。Adrian Kokot