Why this JavaScript code does not work?

Question

This code should working, but I have no idea why it is not working at all.

HTML:

<p><input type="file" size="50"></p>
<p><input type="button" value="test" onclick="test()"></p>

JavaScript:

test = function() {
    console.dir(document.querySelector('input[type="file"]').value);
    var a = document.querySelector('input[type="file"]').vaule;
    console.dir(a);
};

The first console.dir can successfully display the selected file filename

whereas I store it in var a is return undefined, whats happended?

fiddle: jsfiddle.net/eb5tuo7o

Answer 1

With the console log you're using .value but when you're storing it you've misspelled it as .vaule.

test = function() {
    console.dir(document.querySelector('input[type="file"]').value);
    var a = document.querySelector('input[type="file"]').value;
    console.dir(a);
};

Answer 2

There is no such thing as "vaule"

You can access html elements value by using

 document.querySelector('input[type="file"]').value;

And if you are using jquery it's even simpler

  $("input[type=file]").val();