How to properly implement the global variable in javaScript?

Question

I am having a difficulty in displaying the value of totalPrice into my console. I am just getting 0 in my console but I want to get the actual value of each radio button. Can anyone help me please?

html

<lable>Radio1</lable>
    <input type="radio" id="radio1" name="pay" class="myPay"  value="2"/>
    <label>Radio2</label>
    <input type="radio" id="radio2" name="pay" class="myPay"  value="3" />

js code

var totalPrice = 0;
var radio = document.querySelectorAll(".myPay");
radio.forEach(check => {
  check.addEventListener('click', function(e) {
    totalPrice = e.target.value;
  });
});
console.log(totalPrice);

Looks like you are accessing `totalPrice` outside the scope where you define and assign `totalPrice`. — Igor, Aug 27 '20 at 18:53
Does this answer your question? [Define global variable in a JavaScript function](https://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function) — Igor, Aug 27 '20 at 18:53
Yes I want to access out of my forEach loop where I assign it to the value of each radio button.Please help me out. Thanks — user3718511, Aug 27 '20 at 18:54
The problem with the code you provided is by `consoling` your variable on page load, it won't get the total value. Even if you throw the console at the end of your code, it is still ran BEFORE the code in your event listener. — imvain2, Aug 27 '20 at 18:57
Your problem is nothing to do with scope, or global variables. It's just because your code logs `totalPrice` before the user has a chance to interact with the radio buttons and therefore change its value. Just move that last line inside the event handler. — Robin Zigmond, Aug 27 '20 at 18:58
At the time you do `console.log(totalPrice);` the value of `totalPrice` why do you expect that it should be different. No event has occurred at that time. And when the even callback is called, why should previously logged value change? — t.niese, Aug 27 '20 at 19:00
@Igor the scope is fine, the formatting was not correct. So it isn't a duplicate to the link you provided. — t.niese, Aug 27 '20 at 19:00
@RobinZigmond Thanks for your reply. But I want to use totalPrice outisde the event handler to access the value of radio button.please help. Thanks — user3718511, Aug 27 '20 at 19:00
@user3718511 well you can access it outside of the function. But you need to access it after the event occurred. How should the code predict what event will happen in future? — t.niese, Aug 27 '20 at 19:02
You can use `totalPrice` from anywhere, since its global. But if you want a value that's anything other than 0, you have to use it in some code that runs, or can run, at some point *after* the user has interacted with the radio buttons. If you don't want that to be immediately after, please let us know - preferably by editing the question - what you actually want this code to do. — Robin Zigmond, Aug 27 '20 at 19:03
@user3718511 you already got the answer by [Dan Mullin](https://stackoverflow.com/a/63622565), you need to log it in the event handler, or you need to call a function in the event handler that updates your page and reads the `totalPrice`. — t.niese, Aug 27 '20 at 19:08
@user3718511 I'm not sure what "yes please" is in response to. I didn't ask you a yes/no question - I would be happy to help, but as I said you need to describe more clearly what you are trying to do, given that the obvious solution to what you've said so far - logging in the event handler - is apparently no good. — Robin Zigmond, Aug 27 '20 at 19:11
@RobinZigmond I am trying to save value into totalPrice variable and going to use this value into another function within same script. — user3718511, Aug 27 '20 at 19:13
@user3718511 `value into another function within same script.` you don't show how you want to use it in another function, you only log it that after the `forEach`. It will definitely work, but that function has to be called **after** `totalPrice` was changed in the event handler, so you have to call that function in that even listener, or using another even listener that is called on a click event. — t.niese, Aug 27 '20 at 19:29
@user3718511 well the code you posted in the OP will allow this fine. The value you get in your "other function" (which you don't share either the implementation of or, crucially, how it is used) will depend on when it runs though. Your actual question asked how to not get 0 but the value of the selected radio-button - and all the answers so far have shown how to do that. You've indicated this isn't what you want, so it's on you to describe in some detail what you actually want and why this solution isn't satisfactory. — Robin Zigmond, Aug 27 '20 at 19:29

Dan Mullin · Answer 1 · 2020-08-27T19:10:30.437

1

Move your logging into your event listener

var totalPrice = 0;
var radio = document.getElementsByName("pay");
radio.forEach(check => {
    check.addEventListener('click',function(e){
        totalPrice = e.target.value;
        console.log(totalPrice);
    });
});

edited Aug 27 '20 at 19:10

answered Aug 27 '20 at 18:58

Dan Mullin

4,285
2
18
34

Thanks for your answer.But I want to access totalPrice outisde the function.Because I am working on a project and I am just stuck in this unexpected issue. – user3718511 Aug 27 '20 at 19:01
2

You can still access it outside of the function. The issue with the way the code is written, you will only ever log the totalPrice on the first time the page is loaded. When you move the logging inside the event listener, it will log every time a click is triggered. – Dan Mullin Aug 27 '20 at 19:03
Can u please show me another way but editing your answer? Many thanks... – user3718511 Aug 27 '20 at 19:07

score 1 · Answer 2 · answered Aug 27 '20 at 18:58

1

You must console.log(totalPrice) right under totalPrice = e.taget.value;

answered Aug 27 '20 at 18:58

jhrmdk

603
7
13

Thanks for your answer.But I want to access totalPrice outisde the function.Because I am working on a project and I am just stuck in this unexpected issue. – user3718511 Aug 27 '20 at 18:59

score 1 · Answer 3 · answered Aug 27 '20 at 19:09

You can put the global variable in un IIFE like this you can prevent those problems of global variables like unexpected name collision. However to use a global variable you can simply declare with the var keyword outside from each function.

(function(){
let totalPrice=0;
    var radio = document.querySelectorAll(".myPay");
     radio.forEach(check=>{
    check.addEventListener('click',function(e){
             
        totalPrice = e.target.value;
    });
});

document.getElementById("price").addEventListener("click",(event)=>{
  document.getElementById("display").value = totalPrice;
});
})();

<lable>Radio1</lable>
    <input type="radio" id="radio1" name="pay" class="myPay"  value="2"/>
    <label>Radio2</label>
    <input type="radio" id="radio2" name="pay" class="myPay"  value="3" />
    
    <div>
    <input type="text" id="display" value="0">
    <button id="price">Totale price</button>
    </div>

How to properly implement the global variable in javaScript?

3 Answers3