jQuery Val未定义

Question

I'm trying to get the value of an input element on a html page using jQuery. I can get the element value using .val() if I call it from a script tag in the html page. However, when I call the same function from a seperate js file it returns undefined .

Anyone have anyidea what is going on here?

index.html

$(document).ready(function() {
  console.log($("#amount").val());    //  This works
  externalFunction();                   //  This returns undefined
});

file.js

function externalFunction() {
  console.log($("#amount").val());
}

EDIT

I should clarify that the div which contains the input element is hidden.

style="display: none;"

Would this make a difference?

Answer 1

When I call the same function from a seperate js file it returns undefined.

• If you mean the function returns undefined.

This is the correct behaviour because you returned nothing.

You have to use return statement.

function externalFunction() {
    return $("#amount").val();
}

let value=externalFunction();
console.log(value);

• if function is not found in your actual file.

Use export statement or require in order to make function visible in other file also.

Answer 2

As described in the question, that's simply not possible.

Instead, I suspect that you aren't calling externalFunction at the same time you're calling the console.log . Instead, I suspect you're calling it earlier, before the input exists.

There are only two reasons val ever returns undefined :

1. You call it on an empty jQuery object (because nothing matched the selector, for instance, because you called the function too soon).

2. You call it on a jQuery object whose first element is not an input or select (and thus has no value property).