How to add variables from different functions

Question

I've tried different questions, but they haven't helped. I've put what I've tried here, including what I've seen in the questions.

I'm making a thing that adds up the variables, so when the user clicks on a button, it sets a variable, then once then it's added up to make a grand total. However, it is returning as NaN. Can you help?

Here's my code:

// defines global variables, stops them being local ones
var score1;
var score2;
var score3;
var score4;
var score5;
var score6;
var score7;
var score8;
var score9;
var score10;
        
function one(score) {
  var score1 = score;
  document.getElementById("q1").style.display = "none";
  document.getElementById("q2").style.display = "block";
}
function two(score) {
  var score2 = score;
  document.getElementById("q2").style.display = "none";
  document.getElementById("q3").style.display = "block";
}
function three(score) {
  var score3 = score;
  var firstTotal = parseInt(score1) + parseInt(score2) + parseInt(score3);
  document.write(firstTotal); // test purposes only
}

.thing {
  display: none;
}
#q1 {
  display: block !important; /* !important is not on the real thing, just here */
}

<div id="q1" class="thing">
  <h3>1</h3>
  <h1>thing</h1>
  <button onclick="one(0);">0</button>
  <button onclick="one(1);">1</button>
  <button onclick="one(0);">0</button>
  <button onclick="one(0);">0</button>
</div>
<div id="q2" class="thing">
  <h3>2</h3>
  <h1>thing</h1>
  <button onclick="two(1);">1</button>
  <button onclick="two(0);">0</button>
  <button onclick="two(0);">0</button>
  <button onclick="two(0);">0</button>
</div>
<div id="q3" class="thing">
  <h3>3</h3>
  <h1>thing</h1>
  <button onclick="three(0);">0</button>
  <button onclick="three(0);">0</button>
  <button onclick="three(0);">0</button>
  <button onclick="three(1);">1</button>
</div>

(This snippet doesn't exactly display the show/hide bit, but it works in my code editor, and it might have been left out of my code somehow.)

i would consider looking at mv* frameworks and how it helps with modeling. — Daniel A. White
– Daniel A. White, Commented Jun 30, 2020 at 17:23

Axnyff · Accepted Answer · 2020-06-30 17:26:15Z

2

This function:

function one(score) {
   var score1 = score;
   document.getElementById("q1").style.display = "none";
   document.getElementById("q2").style.display = "block";
}

creates a local variable score1 and sets its value to the argument. What you want to do is modify the global value of score1. If you remove the var keyword, it should work fine. You should do the same in your other function.

That's why you get NaN, as you're summing variables that were never initialized

answered Jun 30, 2020 at 17:26

Axnyff

10.1k4 gold badges36 silver badges40 bronze badges

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

Comments

rishabh0211 · Accepted Answer · 2020-06-30 17:35:50Z

You are redeclaring the variables in the functions also thus creating a variable in local scope but in the function three you are refering the global variables which are undefined. Which results in NaN, as

undefined + $$number$$ = NaN

// defines global variables, stops them being local ones
var score1;
var score2;
var score3;
var score4;
var score5;
var score6;
var score7;
var score8;
var score9;
var score10;
        
function one(score) {
  score1 = score;
  document.getElementById("q1").style.display = "none";
  document.getElementById("q2").style.display = "block";
}
function two(score) {
  score2 = score;
  document.getElementById("q2").style.display = "none";
  document.getElementById("q3").style.display = "block";
}
function three(score) {
  score3 = score;
  var firstTotal = parseInt(score1) + parseInt(score2) + parseInt(score3);
  document.write(firstTotal); // test purposes only
}

.thing {
  display: none;
}
#q1 {
  display: block !important; /* !important is not on the real thing, just here */
}

<div id="q1" class="thing">
  <h3>1</h3>
  <h1>thing</h1>
  <button onclick="one(0);">0</button>
  <button onclick="one(1);">1</button>
  <button onclick="one(0);">0</button>
  <button onclick="one(0);">0</button>
</div>
<div id="q2" class="thing">
  <h3>2</h3>
  <h1>thing</h1>
  <button onclick="two(1);">1</button>
  <button onclick="two(0);">0</button>
  <button onclick="two(0);">0</button>
  <button onclick="two(0);">0</button>
</div>
<div id="q3" class="thing">
  <h3>3</h3>
  <h1>thing</h1>
  <button onclick="three(0);">0</button>
  <button onclick="three(0);">0</button>
  <button onclick="three(0);">0</button>
  <button onclick="three(1);">1</button>
</div>

Collectives™ on Stack Overflow

How to add variables from different functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related