Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Very simple javascript doesn't work at all [duplicate]

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 FF and Chrome, didn't work in any case. But it works in fiddle... thanks for any help in advance

like image 422
TeeJay Avatar asked Jun 04 '13 21:06

TeeJay


People also ask

Why my JavaScript is not working?

On the web browser menu click on the "Edit" and select "Preferences". In the "Preferences" window select the "Security" tab. In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox. Click on the "Reload the current page" button of the web browser to refresh the page.

Why is JavaScript running twice?

It's because a <label> with a for attribute raises the click event of <input type="checkbox"> element that is associated for when clicked. You should bind click event handler to input , not to label .

How do you check if there are duplicates in an array JavaScript?

To check if an array contains duplicates: Use the Array. some() method to iterate over the array. Check if the index of the first occurrence of the current value is NOT equal to the index of its last occurrence. If the condition is met, then the array contains duplicates.


2 Answers

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.

like image 75
Greg Avatar answered Sep 19 '22 17:09

Greg


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

like image 40
Igor Avatar answered Sep 19 '22 17:09

Igor