CODEWITHSUNDEEP
javascript
adeel
adeel

Reputation: 27

How to store textbox value in variable?

Here is my script:

<script>
    window.onload = function () {
        document.getElementById('btnone').addEventListener('click', function () {
            document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnone').value;
        });
        document.getElementById('btntwo').addEventListener('click', function () {
            document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btntwo').value;
        });
</script>

So now please tell me after displaying values entered by button clicks in textbox, how can i store these values in variables?

Upvotes: 0

Views: 950

Answers (4)

Raghavendra
Raghavendra

Reputation: 3580

you can do like this

     <script>
    var val1,val2; // this is global scope you can use in onload, addEventListener, or in any places of JavaScript of this frame. 
        window.onload = function () {
//if you define two varaibles `var val1,val2;` here they are local to onload and also available for  addEventListener function only.
            var tb = document.getElementById('textBox');
            document.getElementById('btnone').addEventListener('click', function () {
                tb.value = val1 = tb.value + this.value;
            });
            document.getElementById('btntwo').addEventListener('click', function () {
                tb.value = val2 = tb.value + this.value;
            });
    </script>

Upvotes: 0

jony89
jony89

Reputation: 5367

just to declare variables, you can use this : (the variables are not in the global scope and should not be there)

<script>
    window.onload = function () {
        document.getElementById('btnone').addEventListener('click', function () {
            var btnOneWithTextBox = document.getElementById('textBox').value + document.getElementById('btnone').value
            document.getElementById('textBox').value = btnOneWithTextBox;
        });
        document.getElementById('btntwo').addEventListener('click', function () {
            var btnTwoWithTextBox = document.getElementById('textBox').value + document.getElementById('btntwo').value;
            document.getElementById('textBox').value = btnTwoWithTextBox;
        });
    }
</script>

if you would like to access it outside the events then create a variable outside this function, its all depeneds on what scope do you want this variables ?

<script>
    window.onload = function () {
        var btnsText;
        document.getElementById('btnone').addEventListener('click', function () {
            btnsText.btnOneWithTextBox = document.getElementById('textBox').value + document.getElementById('btnone').value
            document.getElementById('textBox').value = btnsText.btnOneWithTextBox;
        });
        document.getElementById('btntwo').addEventListener('click', function () {
            btnsText.btnTwoWithTextBox = document.getElementById('textBox').value + document.getElementById('btntwo').value;
            document.getElementById('textBox').value = btnsText.btnTwoWithTextBox;
        });

        //here i can create other events that will use btnsText
    }
</script>

Upvotes: 0

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

<script>
    window.onload = function () {
    var value1= "", value2=""; 
        document.getElementById('btnone').addEventListener('click', function () {
            document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnone').value;
     value1 = document.getElementById('textBox').value;
        });
        document.getElementById('btntwo').addEventListener('click', function () {
            document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btntwo').value;
     value2 = document.getElementById('textBox').value;
        });
</script>

Upvotes: 1

AkshayJ
AkshayJ

Reputation: 769

<script>
var onestore,twostore;
    window.onload = function () {

        document.getElementById('btnone').addEventListener('click', function () {
            document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnone').value;
onestore=document.getElementById('textBox').value;
        });
        document.getElementById('btntwo').addEventListener('click', function () {
            document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btntwo').value;
twostore=document.getElementById('textBox').value;
        });
</script>

Upvotes: 0

Related Questions