未捕获的ReferenceError:未定义函数.HTMLButtonElement.包含rails6中的webpack

Question

我试图找到一个解决方案，但在中无法找到。所以我需要帮助。我使用rails 6和webpack我有一部分主菜。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 http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
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的末尾，所以错误是没有定义ClearCalibration2( 用onclick=Restart()重写html字符串为<button type="button" class="btn btn-primary" data-dismiss="modal" id="Restbutt">Calibrate</button>在调用类似的main.js之后

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

我收到的错误是"无法读取null的属性'addEventListener'">

你能帮我吗？

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()}) 解决启动重启功能的问题，但还有一个问题。对于broswer来说，Restart中的函数(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;

到这个(作战的(

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