JavaScript code runs only when file saved at certain location

Question

I have created some htm pages with JavaScript code which I saved on my Windows desktop. The code runs fine after I confirm a prompt to run scripts or Active X, but as soon as I copy the file over to a network location (not a server) and try to open the file, JavaScript does not run any more (the prompt mentioned above does not appear). I did not have this problem with other code (including JavaScript) and I am not sure what the problem is - probably something around network safety settings?

Specifically, the following snippet seems to cause the problem:

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
  </div>
</div>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
} 

.show {display:block;}

The button shows, but the dropdown menu does not show up when the file is saved on the network drive. So function myfunction() does not work apparently.

How do you open that file? Do you see any errors in Chrome developer tool console apparently? — Eduard Malakhov, Apr 06 '17 at 23:17
It runs on Chrome, even on the network saved file, but not on IE11. So it cannot be an overriding security policy, it must be an IE specific issue with the particular JavaScript function (other scripts run without issue) — Joerg, Apr 06 '17 at 23:26
Yes. On the file saved on desktop (where the script works) it says "Object doesn't support property or method 'matches'". On the file saved on network drive, it says "Unable to get property 'toggle' of undefined or null reference". — Joerg, Apr 06 '17 at 23:36

score 0 · Answer 1 · answered Apr 06 '17 at 23:23

If you want to use JavaScript and CSS in your HTML, instead of including it as .js and .css, you should let the browser know what kind of code its dealing with.

<style>
.show {
  display: block;
}
</style>

 <div class="dropdown">
   <button onclick="myFunction()" class="dropbtn">Dropdown</button>
 <div id="myDropdown" class="dropdown-content"></div>
</div>

<script>
  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
</script>

So if you want to use JavaScript inside your .html file, always wrap it between the
<script> /* Your JavaScript */ </script> tag.

For CSS use the <style> /* Your CSS */ </style> tag.

Sure, I've done that of course, that does not seem to be the problem. — Joerg, Apr 06 '17 at 23:34

JavaScript code runs only when file saved at certain location

1 Answers1

Linked