Me estoy volviendo indefinido cada vez que intento obtener una variable de un cuadro de texto
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>He intentado eliminar el "#" de las variables fname y lname, pero luego imprime "indefinido"
Estoy confundido sobre por qué sucede esto.
Las variables declaradas por let tienen su alcance en el bloque para el que se declaran, así como en cualquier subbloque contenido. De esta forma, let funciona de forma muy parecida a var. La principal diferencia es que el alcance de una variable var es la función envolvente completa.
Así que usa cualquiera de las var
var fname = $("#firstName").val(); var lname = $("#lastName").val(); var fullname = fname + " " + lname; function foo() { alert(fname); alert(fullname); } Para conocer el alcance de let, consulte, por ejemplo, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
Necesita el # en jquery para acceder a la identificación, consulte, por ejemplo, https://learn.jquery.com/using-jquery-core/selecting-elements/
Prueba esto
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>