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);

Does this answer your question? Define global variable in a JavaScript function — Igor
– Igor, Commented Aug 27, 2020 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
– user3718511, Commented Aug 27, 2020 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
– imvain2, Commented Aug 27, 2020 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
– Robin Zigmond, Commented Aug 27, 2020 at 18:58
@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
– t.niese, Commented Aug 27, 2020 at 19:02

jhrmdk · Accepted Answer · 2020-08-27 18:58:34Z

1

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

answered Aug 27, 2020 at 18:58

jhrmdk

6527 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3718511 Over a year ago

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.

Nick · Accepted Answer · 2020-08-27 19:09:28Z

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>

Dan Mullin · Accepted Answer · 2020-08-27 19:10:30Z

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, 2020 at 19:10

answered Aug 27, 2020 at 18:58

Dan Mullin

4,4483 gold badges22 silver badges36 bronze badges

3 Comments

user3718511 Over a year ago

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.

Dan Mullin Over a year ago

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.

user3718511 Over a year ago

Can u please show me another way but editing your answer? Many thanks...

Collectives™ on Stack Overflow

How to properly implement the global variable in javaScript?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related