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

Question

我试图找到一个解决方案，但我做不到。所以我需要帮助。我使用 rails 6，使用 webpack 我有一部分 main.JS 代码：

 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);

和calibration.js代码的一部分

    */
 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 
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

StartPack 包含

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

和我的一部分 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' %>

我尝试执行的操作以及收到的错误消息 1) 我尝试将 main.js 脚本替换到 html 的末尾，所以错误是 ClearCalibration is not defined 2) 在 html 字符串中用 onclick=Restart() 重写为 <button type="button" class="btn btn-primary" data-dismiss="modal" id="Restbutt">Calibrate</button> 在调用 main.js like

之后

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

我收到的错误是 "Cannot read property 'addEventListener' of null"

你能帮帮我吗？

Answer 1

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

或（jQuery方式）

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

Answer 2

正如 Alex V. 所说，通过帮助 document.addEventListener('click', function(ev) {if(ev.target.id == 'Restbutt')Restart()}) 解决启动重启功能的问题，但还有一个问题。 Restart 中的函数（functions from calibration.js）是 "undefined" for broswer。所以，这个问题的解决方案是从这个

重新定义函数

    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;

到这个（工作wariant）

  PopUpInstruction = function(){
  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
  */

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

  CalibrationPoints = {};
  PointCalibrate = 0;
  }

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

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

javascript

html

webpack

referenceerror

ruby-on-rails-6