在尝试使用JQuery从文本框获取值时未定义

Question

当我试图从文本框中获取变量时

我得到未定义

let fname = $("#firstName").val();
let lname = $("#lastName").val();
let fullname = fname + " " + lname;
function foo() {
alert(fullname);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class = "person">First name:<input type = "text" id = "firstName"></div>
<div class = "person">Last name:<input type = "text" id = "lastName"></div>
<div class="person"><button onclick="foo()">Submit</button></div>
</div>

我已尝试删除"#"从fname和lname变量中，但随后它打印&;undefined&;

我不明白为什么会这样。

Answer 1

由声明的变量将它们的作用域置于声明它们的块中，以及所包含的子块中。在这种情况下，let的工作方式与var非常相似，主要区别在于var变量的作用域是整个封闭函数。

使用var

var fname = $("#firstName").val();
var lname = $("#lastName").val();
var fullname = fname + " " + lname;
function foo() {
alert(fname);
alert(fullname);
}

let的作用域参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
你需要jquery中的#来访问id，参见https://learn.jquery.com/using-jquery-core/selecting-elements/

Answer 2

尝试这些

function foo() {
let fname = $("#firstName").val();
let lname = $("#lastName").val();
let fullname = fname + " " + lname;
alert(fullname);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class = "person">First name:<input type = "text" id = "firstName"></div>
<div class = "person">Last name:<input type = "text" id = "lastName"></div>
<div class="person"><button onclick="foo()">Submit</button></div>
</div>