jQuery nested functions

Question

I am still new to JavaScript and jQuery, so I am confused as to why the following code is not working as I anticipated. All I am trying to do is save input on a button click (id=recordInput) and display it with another button click (id=displayInput). What I observe is that tempInput is stored, (the code works until that point) but assignment of displayInputs onclick attribute is not executed. My question is, can you not nest a $().click() call inside of another &().click() call?

<script>
$(document).ready(function () {
 $('#recordInput').click(function(event) {
 var tempInput = $('#testInput').val();
 &('#displayInput').click(function(event) {
 console.log(tempInput);
 });
 });
});
</script>

My thinking is this in pseudocode:

1. assign recordInput onclick attribute to the following function:
2. store tempInput
3. set displayInput onclick to alert the tempInput value

what is wrong with my thinking?

NOTE: I did not include any html tags but all of the ids are referenced correctly

• James J. Hill: Did you mean $('#displayInput') ?
• Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ: Replace & with $ in the nested one.
• Jordan Schnur: Like stated above you used a & instead of a $. Please check your console before posting.
• Barmar: In addition to the typo, your design is suspicious. It's almost always wrong to declare one event handler inside another. Every time you click on recordInput, it's going to add an additional click handler to displayInput, so the second function will run multiple times when you click on it.

Answer 1

It's not working because you have put & instead of $ here

$('#displayInput').click(function(event) {

Fixing this may work, but you shouldn't set event handlers this way. Because every time your first handler function is called it will set an event handler for the second one. You can try with your console.log and you will see that the number of console.log is increasing by every click on #recordInput. So you should better set it like this :

var tempInput;
$('#recordInput').click(function(event) {
 tempInput = $('#testInput').val();
});
$('#displayInput').click(function(event) {
 console.log(tempInput);
});

Answer 2

I would change

$(document).ready(function () {
 $('#recordInput').click(function(event) {
 var tempInput = $('#testInput').val();
 &('#displayInput').click(function(event) {
 console.log(tempInput);
 });
 });
});

to

$(function(){
var testInput = '';
$('#recordInput').click(function(){
 testInput = $('#testInput').val();
});
$('#displayInput').click(function(){
 if(testInput !== ''){
 console.log(testInput);
 }
});
});

You are using & instead of $. Of course, you don't have to format the code exactly like I did.