JavaScript funtion loading() not working
I'm a web developer and have come across a weird problem in Firefox 81.0.1 (and probably others). I have a website with a javascript function loading() and an image in the body with onclick="loading();". When I click on the image, nothing happens.... or rather, I get a "TypeError: loading is not a function". When I rename the function and the onclick to loadin, it will work correctly. Is loading some protected name in Firefox or is this a bug? This works fine in IE, Edge, iOS-Safari etc. It also works in Firefox on many other of my pages where the loading function is actually located in a linked js-file.
Want to replicate it? I went to https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst and replaced the code on the left with the code further below and then clicked "Run". So, when I then click on the img_girl.jpg the div should appear, but it won't. After renaming to loadin and clicking on "Run" again it will work.
Here's the code:
<!DOCTYPE html> <html> <head> <script language="javascript" type="text/javascript"> function loading() { var loading = document.getElementById('loading'); loading.className = 'ld-visible'; loading.style.top = loading.offsetTop + document.body.scrollTop; loading.style.left = loading.offsetLeft + document.body.scrollLeft; } </script> <style type="text/css"> div.ld-invisible { display:none; } div.ld-visible { display:block; position:absolute; top:20%; left:30%; width:250px; height:150px; text-align:center; vertical-align:middle; background:#ccf; border:1px solid #99f; } </style> </head> <body> <div id="loading" class="ld-invisible"><p><br><img src="../images/colorpicker.gif" border="0" alt="..." /></p></div> <h2>My First JavaScript</h2> <img src="../html/img_girl.jpg" border="0" onclick="loading();" /> </body> </html>
Được chỉnh sửa bởi firefox1020 vào