Javascript/HTML variable is undefined (global var)

Question

Ok I can't seem to figure out why this variable is coming back undefined in my alert box. What am I missing here?

<html>
<script src="xslt.js"></script>
<script>
var file;
var objecturl;
var files;
var filename="filename goes here";
function handleFileSelect(evt) {
    files = evt.target.files; // FileList object
    file = files[0];
    filename = file.name;
}
function submit() {
alert(filename);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Select your XML/CCD File(s):<input type="file" id="files" name="files[]" multiple />
<input id="clickMe" type="button" value="View CCD" onclick="submit();" />
<div id="transformResult"></div>
</html>

If I fix the error with the script appearing before the input it tries to modify, then it comes back with the file name of the file I picked, so I still can't reproduce the problem. — Quentin
– Quentin, Commented May 21, 2014 at 15:59
Chrome browser, which has worked in the past with other code I've written similar to this. — Kyle
– Kyle, Commented May 21, 2014 at 16:00

bloodyKnuckles · Accepted Answer · 2014-05-21 16:10:23Z

1

Try this:

<script>
var file;
var objecturl;
var files;
var filename="filename goes here";
function handleFileSelect(evt) {
    files = evt.target.files; // FileList object
    file = files[0];
    filename = file.name;
}
function submit() {
alert(filename);
}
</script>

Select your XML/CCD File(s):<input type="file" id="files" name="files[]" multiple />
<input id="clickMe" type="button" value="View CCD" onclick="submit();" />
<div id="transformResult"></div>

<script>
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Notice I moved the addEventListener to a script that runs after the elements are loaded in the DOM.

answered May 21, 2014 at 16:10

bloodyKnuckles

12.2k4 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel A. White · Accepted Answer · 2014-05-21 15:57:36Z

0

You have to wait for the input field to be in the dom before calling getElementById, hence filename is not set.

answered May 21, 2014 at 15:57

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

4 Comments

Quentin Over a year ago

While that is an error in the code in the question, it doesn't explain the result that is described there.

Kyle Over a year ago

Alright, so what would be the best way to rearrange this so that it is loaded in the correct order.

Daniel A. White Over a year ago

you should put it in a load handler.

Quentin Over a year ago

Move the script element to after the input element.

Collectives™ on Stack Overflow

Javascript/HTML variable is undefined (global var)

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related