Question

我在下面写了一些JavaScript。这非常简单，并将事件添加到由其类找到的按钮。但是，当我单击按钮时，什么也没发生。

请问有人可以帮忙，因为我在拍摄此照片时遇到了麻烦，而我却无法获得它。

@extends('layouts.app')

@section('content')

 <h1>Create new</h1>

{{--  Purchase order --}}
 {{ Form::open(['route' => 'po.store']) }}

    {{ Form::label('supplier', 'Supplier') }}
    {{ Form::select('supplier', [$suppliers], null, ['placeholder' => 'Select a supplier...']) }}
    {{ Form::label('staff', 'Staff') }}
    {{ Form::select('staff', [$staff], null, ['placeholder' => 'Select a staff member']) }}
    {{ Form::label('status', 'Status' ) }}
    {{ Form::select('status', [$statuses]) }}
    <br>
    {{ Form::label('deliverto', 'Deliver To:') }}
    {{ Form::text('deliverto', '') }}
    <br>
    {{ Form::label('priceex', 'Price (ex VAT)') }}
    {{ Form::text('priceex') }}
    {{ Form::label('priceinc', 'Price (inc VAT)') }}
    {{ Form::text('priceinc') }}
    {{ Form::submit('Submit') }}

<hr>

{{-- Lines section--}}

 <table id="linesTable">
    <tr> {{--headings--}}
        <th>Code</th>
        <th>Quantity</th>
        <th>Description</th>
        <th>Price (ex VAT)</th>
        <th>Price (inc VAT)</th>
        <th>notes</th>
        <th></th>
    </tr>
     <tr>
         <td>{{Form::text("lines[0][code]")}}</td>
         <td>{{Form::text("lines[0][quantity]")}}</td>
         <td>{{Form::text("lines[0][description]")}}</td>
         <td>{{Form::text("lines[0][price_ex_vat]", null, ["class" => "textbox_prices"])}}</td>
         <td>{{Form::text("lines[0][price_inc_vat]", null, ["class" => "textbox_prices"])}}</td>
         <td>{{Form::text("lines[0][notes]")}}</td>
         <td><button type="button">Remove</button></td>

 </table>
 <button type="Button" id="addNew">Add New Line</button>

 {{ Form::close()}}

    <script type="text/javascript">
        document.getElementById("addNew").addEventListener("click", insertRow);
        function insertRow() {
            alert('hi');
        }

    </script>
@endsection

Answer 1

我在这里发布被接受的评论。我不确定技术细节，但是处理DOM解析的一个好习惯是在执行任何操作之前始终确保文档已完全加载。

以下是操作示例：

window.addEventListener(‘DOMContentLoaded’, () => {
  // Add your event listeners here
  // Also better practice, declare your function before appending the listener
  function insertRow() {
    alert('hi');
  }
  document.getElementById("addNew").addEventListener("click", insertRow);
});

对我的评论进行了两次编辑：

首先，window.onload不是处理事件的最佳方法。最好在窗口对象上附加一个eventListener
第二，如@ T.J.Crowder答案中所述，load事件等待整个页面收费，包括图像和其他内容。相反，最好使用DOMContentLoaded事件，该事件将在DOM准备就绪时发出（但不等待所有其他内容加载）。这是文档的外观：MDN - Doc

在HTML内直接添加JavaScript代码也不是一个好习惯。最好使用外部脚本，该脚本是在</body>结束标记之前（或之后）在HTML末尾加载的，如下所示：

<script src=‘path_to_my_script/script.js’></script>

希望它能解决所有问题！

Answer 2

JavaScript的工作方式是您试图在创建按钮之前设置事件侦听器。两种解决方案：

 window.addEventListener('DOMContentLoaded', (event) => {
   contentLoaded();
 });
 function contentLoaded()
 {
    document.getElementById("addNew").addEventListener("click", insertRow);
 }

或者您也可以使用HTML：

 <body onload="contentLoaded()">

AddEventListener不附加（单击按钮时什么也没有发生）

2 个答案: