Artin Artin -3 years ago 133
jQuery Question

Use the input value in global context in JavaScript

I work with a small app and the front-end looks like following,

enter image description here

After I select the currency, the

Address Generate
button is active and with clicking it, opens a modal with input option.

enter image description here

I would like to have the
wallet name
in the global context. The code for the landing page is here,

<body id="page-top" class="index">

<!-- modal for providing the name of the wallet-->
<div id="walletNameModal" class="modal fade bd-example-modal-sm" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true" tabindex="-1">

<div class="modal-dialog modal-sm" role="document">

<!--layout of the set of modals-->
<div class="modal-content">
<!--modal header-->
<div class="modal-header">
<!--close the dialog-->
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Wallet Name</h4>
</div>

<!--modal body-->
<div class="modal-body">
<!--provide the wallet name as input text-->
<input id="addressName" type="text" class="form-control">
</div>

<!--modal footer-->
<div class="modal-footer">
<button id="addressNameSubmitBtn" type="button" class="btn btn-default" data-dismiss="modal">Submit
</button>
</div>
</div>
</div>
</div>


<section id="myform">

<div class="container">

<div class="row">
<div class="col-lg-10">
<form name="landingBox" id="walletForm" class="form-inline" novalidate>

<!--Select Currency-->
<div class="form-group controls">
<select id="selectCurrency" name="" title="Select Currency"
class="btn-primary form-control">
<option selected disabled>Select Currency</option>
<option value="0">Bitcoin</option>
<option value="1">Ethereum</option>
<option value="2">Litecoin</option>
<option value="3">Nem</option>
<option value="4">Ripple</option>
<option value="5">Dash</option>
</select>
</div>

<!--Generate Address-->
<div class="form-group controls">
<button id="generateAddress" type="button" class="btn btn-primary" disabled>
Address Generate
</button>
</div>

<!--Show Balance-->
<div class="form-group controls">
<button id="balance" type="button" class="btn btn-primary" disabled>
Balance
</button>
</div>

<!--Show Transactions -->
<div class="form-group controls">
<button id="transactions" type="button" class="btn btn-primary" disabled>
Transactions
</button>
</div>

<!--Send Money-->
<div class="form-group controls">
<button id="sendMoney" type="button" class="btn btn-primary" disabled>
Transactions
</button>
</div>

</br>
</br>
<!--Select Address Drop-down-->
<div class="form-group controls">
<select name="" id="address" class="form-control input-sm">
<option value=""></option>
</select>
</div>
</form>

</div>
</div>
</div>
</section>


</body>


The project structure is following,

enter image description here

The JavaScript is written in the
main.js
file,

$(document).ready(function () {

var selectedCurrency, walletName;

// if the currency is selected, make the address generate button active
$('#selectCurrency').change(function () {
selectedCurrency = $('#selectCurrency option:selected').text();
$('#generateAddress').removeAttr('disabled');
});

// if the address generate btn is active and clicked, open the modal
// to provide the wallet name
$('#generateAddress').click(function () {
$('#walletNameModal').modal();
});

// after the modal submission, get the wallet name
$('#addressNameSubmitBtn').on('click', function () {
walletName = $('#addressName').val();

// prints the value
console.log(walletName);
})

// doesn't print the value
console.log("Wallet = " + walletName);
});


The
console.log(walletName);
actually prints the wallet name, but, when I go out, the
console.log("Wallet = " + walletName);
prints
Wallet = undefined
.

I think the
walletName;
is global and hence, it should also print the value then the
undefined
in the console. What's the issue here?

Update:

After putting the variable out of the scope, I still have the same issue,

var walletName;

$(document).ready(function () {

var selectedCurrency;

// some code
});


enter image description here

Answer Source

Change your code to

var walletName;
$(document).ready(function () {
    var selectedCurrency;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download