CODEWITHSUNDEEP
javascripthtmlinternet-explorer
rh4games
rh4games

Reputation: 972

onclick function returns undefined in IE, works fine in Chrome and Firefox

I have a HTML page like this (simplified)

<html>
  <head>
    <style>
...
    </style>
    <script type ="text/javascript">
      function foo()
      {
...
      }
    </script>
  </head>
  <body>
    <input type="button" value="ClickMe" onClick="foo()"/>
  </body>
</html>

This works fine on Chrome, Firefox and Safari, but when I use IE, when I click, it returns 'foo' is undefined in the console logs. I tried moving all section inside but still got the same issue. Any hints?

EDIT 1 : here is more of my code

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <meta content="utf-8" http-equiv="encoding"/>
    <title>My Title</title>

    <script type="text/javascript">
      function handleBrowseClick()
      {
        var fileinput = document.getElementById("browse");
        fileinput.click();
      }

      function handleChange()
      {
        var fileinput = document.getElementById("browse");
      }

      function addListener()
      {
        document.getElementById('browse').addEventListener('change', handleFileSelect, false);
      }

      function handleFileSelect(evt)
      {
        var files = evt.target.files;

        var output = [];
        for (var i=0 ; f=files[i] ; i++) {
          var reader = new FileReader();
          reader.onload = (function(theFile) {
            return function(e) {
              <more JS code here>
            };
          })(f);
          reader.readAsBinaryString(f);
        }
      }
    </script>
  </head>
  <body>
    <input type="file" id="browse" name="fileupload" style="display: none" onChange="handleChange();"/>
    <input type="button" value="ClickMe" id="fakeBrowse" onClick="handleBrowseClick();"/>
    <output id="list"></output>
  </body>
</html>

<script type="text/javascript">
  window.onload = addListener();
</script>

Upvotes: 3

Views: 3137

Answers (2)

Salma Hassan
Salma Hassan

Reputation: 63

I had just came across the same problem.

For me, it was because the HTML had some syntax errors that Chrome (even Microsoft Edge) doesn't complain about but Internet Explorer does.

As soon as I fixed those the undefined function error was gone.

Upvotes: 1

Philip Brown
Philip Brown

Reputation: 11

Since this is the first hit in google for my query, but no actual answer was given:

I'll give a reference to where I found the actual solution: onclick event in anchor tag not working in IE

which points out that IE is stupid, and needs you to change:

onClick="somefunc();"

to

onClick="javascript:somefunc();"

Upvotes: 0

Related Questions