Uncaught ReferenceError: function is not defined. HTMLButtonElement.onclick with webpack in rails6

Question

I have tried to find a solution but I can't do this in. So I need help. I work with rails 6, with webpack I have a part of main.JS code:

 window.onload = function() {

some code 
 };

/**
 * Restart the calibration process by clearing the local storage and reseting the calibration point
 */
function Restart(){
    document.getElementById("Accuracy").innerHTML = "<a>Not yet Calibrated</a>";
    ClearCalibration();
    PopUpInstruction();
}
// document.getElementById("Restbutt").addEventListener("click", Restart, false);

and a part of calibration.js code

    */
 function PopUpInstruction(){
  ClearCanvas();
  swal({
    title:"Calibration",
    text: "Please click on each of the 9 points on the screen. You must click on each point 5 times till it goes yellow. This will calibrate your eye movements.",
    buttons:{
      cancel: false,
      confirm: true
    }
  }).then(isConfirm => {
    ShowCalibrationPoint();
  });

}
/**
  * some code
  */

function ClearCalibration(){
  window.localStorage.clear();
  $(".Calibration").css('background-color','red');
  $(".Calibration").css('opacity',0.2);
  $(".Calibration").prop('disabled',false);

  CalibrationPoints = {};
  PointCalibrate = 0;
}

// sleep function because java doesn't have one, sourced from http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

StartPack contains

require("../components/main");
require("../components/calibration");

and part of my html5:

<%= javascript_pack_tag 'StartPack', 'data-turbolinks-track': 'reload' %>

<!-- some code -->
<!-- Modal -->
<div id="helpModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <img src="<%= asset_pack_path 'media/images/calibration.png' %>" width="100%" height="100%" alt="webgazer demo instructions"></img>
      </div>
      <div class="modal-footer">
        <button id="closeBtn" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="Restart()">Calibrate</button>
        <!--        <button type="button" class="btn btn-primary" data-dismiss="modal" id="Restbutt">Calibrate</button>-->
      </div>
    </div>
  </div>
</div>
<!-- Latest compiled JavaScript -->
<%= javascript_pack_tag 'LatestCompiledJS', 'data-turbolinks-track': 'reload' %>

What I tried to do and what error messages I received 1) I try to replace main.js script to the end of html so the error was ClearCalibration is not defined 2) rewrite in html string with onclick=Restart() to <button type="button" class="btn btn-primary" data-dismiss="modal" id="Restbutt">Calibrate</button> with after calling in main.js like

function Restart(){
document.getElementById("Accuracy").innerHTML = "<a>Not yet Calibrated</a>";
ClearCalibration();
PopUpInstruction();
};
document.getElementById("Restbutt").addEventListener("click", Restart, false);

and an error which I recieve was "Cannot read property 'addEventListener' of null"

could you help me?

Answer 1

document.addEventListener('click', function(ev) {if(ev.target.id == 'Restbutt')Restart()})

or (jQuery way)

$(document).on('click', '#Restbutt', Restart);