0

I checked many posts, but looks all different and none of solutions work for me, the following is an extreme simple example, img1_click works in the newest Chrome with mouse click on desktop, but on touchscreen the img1_clickis never called, and I could see:

uncaught referenceerror img1_click is not defined

I found this post which suggests:

document.getElementById ('img1').addEventListener ("click", img1_click, false);

However, it is still not working!

I define function img1_click in a JavaScript file and it is loaded in this .html file:

 <table >

 <td width="280">
 ...
 </td>
 <td width="280">
 <p id="img1" 
 style="width:280px;height:157px;
 background:url(images/1.bmp);background-size: 280px 157px;"onclick="img1_click()">
  </p>
  </td>`

There is a link to https://tommcfarlin.com/javascript-reference-error-is-not-defined/ to discuss this, it means sometimes HTML could not recognize or define the function, which is in JavaScript.

double-beep
  • 5,031
  • 17
  • 33
  • 41
user7768436
  • 37
  • 9
  • If you already added an event listener for `p#img1` then the tag does not need an onclick property (especially if you did not define what `function img1_click()` is). – Iskandar Reza Mar 20 '19 at 20:16
  • Please provide a minimal working (or in this case not working) example, so we can actually test, what is going wrong. Otherwise, we're just guessing. See also https://stackoverflow.com/help/how-to-ask – Christoph Herold Mar 20 '19 at 20:35
  • thanks, sorry I did not not make it clear, I noticed if I move the whole Chrome page into touchscreen, it works, but when I use a special touchscreen program (which is based on a old version of Chrome, but not just put Chrome into touchscreen), it does not work. I guess I should spend time on upgrading that touchscreen program – user7768436 Mar 20 '19 at 21:25
  • there is a link https://tommcfarlin.com/javascript-reference-error-is-not-defined/ to discuss this, it means sometimes html could not recognize or define the function, which is in javascript. is there a way to force the html know the function position? – user7768436 Mar 20 '19 at 22:04
  • This is a very old style of HTML - consider using modern HTML5 instead: no `onclick`, instead querySelect your element on the JS side and use `addEventListener`. Also don't use `style"..."` but just set a `class="someclass"` and then define your CSS on that class instead. – Mike 'Pomax' Kamermans Mar 20 '19 at 22:16
  • if you haven´t solved this yet, and are still looking for help, it´d be better if you provided all of your relevant JS, including the declaration of `img1_click()` – Scaramouche May 27 '19 at 12:21

2 Answers2

0

Are you 100% sure that your img_click1() function is defined? In Chrome developer tools (ctrl+shift+i, F12, or Menu -> More Tools -> Chrome Developer Tools) go to console and run img_click1(); to test that it actually exists. If you run into an undefined issue, then we'll need more code (entire HTML + entire JS file) in order to verify that your code is working correctly.

abelito
  • 1,094
  • 1
  • 7
  • 18
0

It seems to me that the problem can be due to the function being in another file, had the similar problem sometimes. The thing is, while that javascript file is still loading, the browser reaches the part of the code where you try to assign that function to an onclick event. Try wrapping it inside window.onload function for the code to wait until all resources finish loading. 

window.onload = function() {
     document.getElementById ('img1').addEventListener ("click", img1_click, false);
}
AwesomeGuy
  • 1,059
  • 9
  • 28