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?

I have seen this answer but it is a quite difficult to understanding. I am a begginer in web-development — AAYamoldin, Nov 15 '19 at 05:58
Hey, try `window.something = function(...)` instead of `function Restart(){...}`, let me know — Ashish Kamble, Nov 15 '19 at 06:19
It clearly saying that function is undefined. Please check your build file(.js) and make sure it is defined. If it really exist, you can directly call and test it in the Console tab itself. — Veeresh Devireddy, Nov 15 '19 at 06:22
Ashish Kamble, I have tried do this code window.something = function Restart(){ // document.getElementById("Accuracy").innerHTML = "Not yet Calibrated"; something.innerHTML += "Not yet Calibrated"; document.getElementById("Accuracy").addEventListener("click", Restart, false); ClearCalibration(); PopUpInstruction(); }; But error doesn't go — AAYamoldin, Nov 15 '19 at 06:30
Veeresh Devireddy, hey. Thak you for you answer. You mean about that? Unchecked runtime.lastError: QUOTA_BYTES_PER_ITEM quota exceeded webgazer.js:11006 No stream webgazer.js:11027 DOMException calibration:82 Uncaught ReferenceError: Restart is not defined at HTMLButtonElement.onclick (calibration:82) onclick @ calibration:82 Restart VM11434:1 Uncaught ReferenceError: Restart is not defined at :1:1 (anonymous) @ VM11434:1 Restart() VM11446:1 Uncaught ReferenceError: Restart is not defined at :1:1 (anonymous) @ VM11446:1 — AAYamoldin, Nov 15 '19 at 06:33

score 0 · Accepted Answer · answered Nov 16 '19 at 08:12

0

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

or (jQuery way)

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

answered Nov 16 '19 at 08:12

rtxndr

872
1
9
20

score 0 · Answer 2 · answered Nov 17 '19 at 19:42

As Alex V. said problem with launch Restart function solve by helping document.addEventListener('click', function(ev) {if(ev.target.id == 'Restbutt')Restart()}) but there was one more problem. Functions which stand in Restart(functions from calibration.js) was "undefined" for broswer. So, solution for this problem is redefine functions from this

    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;

to this(working 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

2 Answers2