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>Modified by firefox1020