cv:288 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at cv:288:12

The error message "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at cv:288:12" indicates that the button variable is null, which means that the element with the ID "download-button" does not exist in the DOM when the JavaScript code is executed.

To fix this issue, make sure that the "download-button" element exists in the HTML code before the JavaScript code is executed. One way to do this is to move the JavaScript code to the bottom of the HTML file, just before the closing </body> tag.

Here's an updated version of the code that should work:

@extends('website.layouts.app')
@section('title')
{{ __('cv_generator') }}
@endsection

@section('main')
<div class="container-fluid" id="invoice">
  <div id="resume" id="">
    <img src="{{$candidate->photo}}" alt="">
    <h1>{{$name}}</h1>
    <p>Cell: {{$contact->phone}} </p>
    <p>Email: {{$contact->email}}</p>
    <p id="objective">{{$candidate->bio}}</p>
    <dl>
      <dt>Education</dt>
      <dd>
        <h2>{{$candidate->university}}</h2>
        <p><strong>Major:</strong> {{$candidate->major}}<br/></p>
      </dd>
    </dl>
    <dl>
      <dt>Skills</dt>
      <dd>
        <h2>{{$candidate->skill_name}}</h2>
        <p>{{$candidate->skill_description}}</p>
      </dd>
    </dl>
    <dl>
      <dt>Experience</dt>
      <dd>
        <h2>{{$candidate->position}} {{$candidate->experience->name}}</h2>
        <ul>
          <li>{{$candidate->org_name}}</li>
          <li>{{$candidate->ex_start_date}} - {{$candidate->ex_end_date}}</li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt>Languages</dt>
      <dd>{{$candidate->language}} : {{$candidate->language_level}}</dd>
    </dl>
    <dl>
      <dt>References</dt>
      <dd>
        <ul>
          <li>{{$candidate->ref_name}}</li>
          <li>{{$candidate->ref_position}}</li>
          <li>{{$candidate->ref_mobile}}</li>
          <li>{{$candidate->ref_address}}</li>
        </ul>
      </dd>
    </dl>
    <button onclick="window.print();" id="printbtn" class="print-button" type="button"><span class="print-icon"></span></button>
    <button id="download-button">Generate PDF</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>
<script>
  const button = document.getElementById('download-button');

  function generatePDF() {
    // Choose the element that your content will be rendered to.
    const element = document.getElementById('invoice');
    // Choose the element and save the PDF for your user.
    html2pdf().from(element).save();
  }

  button.addEventListener('click', generatePDF);
</script>

@endsection