简体   繁体   English

在JavaScript的全局上下文中使用输入值

[英]Use the input value in global context in JavaScript

I work with a small app and the front-end looks like following, 我使用一个小型应用程序,前端看起来像下面的样子,

在此处输入图片说明

After I select the currency, the Address Generate button is active and with clicking it, opens a modal with input option. 选择货币后,将激活“ Address Generate按钮,并单击它会打开一个带输入的模式。

在此处输入图片说明

I would like to have the wallet name in the global context. 我想在全球范围内使用wallet name 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, 项目结构如下:

在此处输入图片说明

The JavaScript is written in the main.js file, JavaScript写在main.js文件中,

$(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); console.log(walletName); actually prints the wallet name, but, when I go out, the console.log("Wallet = " + walletName); 实际打印钱包名称,但是当我外出时, console.log("Wallet = " + walletName); prints Wallet = undefined . 打印Wallet = undefined

I think the walletName; 我认为walletName; is global and hence, it should also print the value then the undefined in the console. 是全局的,因此,它还应该打印控制台中undefined的值。 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 
});

在此处输入图片说明

Change your code to 将您的代码更改为

var walletName;
$(document).ready(function () {
    var selectedCurrency;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM