8

My JavaScript in .php (static website) file doesn't work. I use there 3 other scripts and they do work, but not this one.

The situation is simple

The JavaScript is:

var myFile = document.getElementById('myFile');

myFile.addEventListener('change', function() {

  alert(this.files[0].size); 
});

and the HTML code in the PHP file is (stripped):

<form onsubmit="return anotherfunction();" action="sendForm.php" enctype="multipart/form-data" method="post">    
  <table>
    <tr>
        <td>Attach an image:</td>
        <td> <input type="file" name="priloha[]" accept="image/*" /></td>
    </tr>
  </table>
</form>

And the JavaScript does nothing, it acts like it doesn't exist. I tried to use the JS in the header, below the header, in the body, in the TD of the input... I also tried using it in external .js file, nothing, doesn't work at all. I tried changing "change" to "click", didn't work neither. I tried to do this all day and I can't figure out what's wrong.

So I tried to do much simpler code to check what's wrong and it seems like change or onchange - the second line of the JS doesn't work.

I also tried to specify HTML5 doctype, doesn't do a thing.

My extra .html file to try even simpler code looks like this and of course doesn't work...

<!DOCTYPE html>
<html>
    <head>      
  </head> 
  <body>
    <table> 
        <tr>
            <td>Input field for click popup:</td>
            <td>
                <script type="text/javascript">
                var input = document.getElementById('input');
                input.addEventListener('click', function() {
                alert("Hello"); 
                });
                </script>
            <input type="text" id="input" />
            
            </td>
        </tr>
    <table>
    </body>  
</html>

Help me please, I don't really know what's this... I forgot to mention, I tried different browsers - Opera 12.15, latest Firefox and Chrome, didn't work in any case. But it works in fiddle...

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
TeeJay
  • 1,593
  • 3
  • 21
  • 33
  • Where is the fiddle? Can you post it here? – Anderson Green Jun 04 '13 at 21:06
  • 2
    You need to run the JavaScript **after** the element is ready/rendered. Whether that means inside of `window.onload = function () { };` or just sometime literally after the input's HTML. Otherwise, the `document.getElementById()` won't be able to find the element. – Ian Jun 04 '13 at 21:07
  • this works in chrome for me: http://jsfiddle.net/GHzp5/ – Jason Jun 04 '13 at 21:07
  • in your first few lines, you mention `document.getElementById('myFile')`, but have no elements with id=myFile in your HTMl. later on you've got matched ids, so ... possible problem? – Marc B Jun 04 '13 at 21:08
  • @Jason You have the JavaScript set to run `onLoad`, so of course that works – Ian Jun 04 '13 at 21:08
  • Fiddle's here http://jsfiddle.net/6ZQkj/267/ . I try to run in after, I'm not sure if I tried yet - why some scripts are supposed to be in the header, some in the body and some in front of

    tag?

     – TeeJay Jun 04 '13 at 21:09
  • Have a look at [my answer here](http://stackoverflow.com/a/9657629/218196) (especially the example at the end) which explains a bit why you have to put certain code at different locations. – Felix Kling Jun 04 '13 at 21:16
  • @TeeJay your fiddle seems to work. However, you are not supposed to use the same Id more than once...and you do that a lot. – basilikum Jun 04 '13 at 21:16
  • 1
    You were right Ian, thank you... oh my god, why couldn't I get to know this myself, so much wasted hours... but you made my day in the end, thank you, I will have a nice sleep. Thank you very much – TeeJay Jun 04 '13 at 21:17
  • Thanks Felix, I'll read it twice to be sure that I remember everything. – TeeJay Jun 04 '13 at 21:21
  • @basilikum I know that well, I was so upset that I did such stupid mistake, but I found out soon after re-reading the code. Just didn't know how to update fiddle code :o) – TeeJay Jun 04 '13 at 21:25

2 Answers2

12

Put the script right at the end of the body, right before the </body> end tag.

Scripts are loaded synchronously where they are placed, so any script put in before the element in question will not be aware of the element's existence.

Also, what Igor said.

Greg
  • 21,235
  • 17
  • 84
  • 107
  • Thank you very much :) also for the explanation, that's what I needed, I need to comprehend things to use them properly. Thanks once more. – TeeJay Jun 04 '13 at 21:22
2

You don't have a DOM element with id "myFile" in html that you included.

Igor
  • 15,833
  • 1
  • 27
  • 32