CODEWITHSUNDEEP
javascript
user3417634
user3417634

Reputation: 1

Access to variables into functions - Javascript

I'm having troubles accessing variables that are into functions. I've tested several codes but none seems to work for me. This is the js code I've so far:

    function Multiply (x,y) {
    var a = x.value,
        b = y.value,
        r = a*b;
    document.getElementById("result").innerHTML = r + " g/mol";     
    }
    function Multiply2 (x,y) {
    var c = x.value,
        d = y.value,
        r2 = c*d;
    document.getElementById("result2").innerHTML = r2 + " g/mol";       
    }
    function Multiply3 (x,y) {
    var e = x.value,
        f = y.value,
        r3 = e*f;
    document.getElementById("result3").innerHTML = r3 + " g/mol";       
    }
    function Multiply4 (x,y) {
    var g = x.value,
        h = y.value,
        r4 = g*h;
    document.getElementById("result4").innerHTML = r4 + " g/mol";       
    }
    function Multiply5 (x,y) {
    var i = x.value,
        j = y.value,
        r5 = i*j;
    document.getElementById("result5").innerHTML = r5 + " g/mol";       
    }

Basically I need another function that sums up all the values (r, r2, r3, r4 and r5) and displays the result as the other ones, in a <span> tag in my HTML document. This would be the one in my chase: 

document.getElementById("total").innerHTML = total + " g/mol";

Upvotes: 0

Views: 64

Answers (3)

martskins
martskins

Reputation: 2940

Try this

var r, r2, r3, r4, r5;

function Multiply (x,y) {
  var a = x.value,
      b = y.value;
  r = a*b;
  document.getElementById("result").innerHTML = r + " g/mol";     
}

function Multiply2 (x,y) {
  var c = x.value,
      d = y.value;
  r2 = c*d;
  document.getElementById("result2").innerHTML = r2 + " g/mol";       
}

function Multiply3 (x,y) {
  var e = x.value,
      f = y.value;
  r3 = e*f;
  document.getElementById("result3").innerHTML = r3 + " g/mol";       
}

function Multiply4 (x,y) {
  var g = x.value,
      h = y.value;
  r4 = g*h;
  document.getElementById("result4").innerHTML = r4 + " g/mol";       
}

function Multiply5 (x,y) {
  var i = x.value,
      j = y.value;
  r5 = i*j;
  document.getElementById("result5").innerHTML = r5 + " g/mol";       
}

Upvotes: 0

harun
harun

Reputation: 1919

Answer: you cannot access local variables. But in your case you can probably use one function that returns the result and call it multiple times.

function Multiply (x,y) {
    return x.value * y.value;    
}
var r1 = Multiply(x1, y1);
document.getElementById("result1").innerHTML = r1 + " g/mol";
var r2 = Multiply(x2, y2);
document.getElementById("result2").innerHTML = r2 + " g/mol";
var r3 = Multiply(x3, y3);
document.getElementById("result3").innerHTML = r3 + " g/mol";
var r4 = Multiply(x4, y4);
document.getElementById("result4").innerHTML = r4 + " g/mol";
var r5 = Multiply(x5, y5);
document.getElementById("result5").innerHTML = r5 + " g/mol";
var total = r1 + r2 + r3 + r4 + r5;
document.getElementById("total").innerHTML = total + " g/mol";

Edit: further removal of duplication by extracting DOM update into another function. 

function Multiply(x,y) {
    return x.value * y.value;    
}
function UpdateDOM(value, element) {
    document.getElementById(element).innerHTML = value + " g/mol";
}
var r1 = Multiply(x1, y1);
UpdateDOM(r1, "result1");
var r2 = Multiply(x2, y2);
UpdateDOM(r2, "result2");
var r3 = Multiply(x3, y3);
UpdateDOM(r3, "result3");
var r4 = Multiply(x4, y4);
UpdateDOM(r4, "result4");
var r5 = Multiply(x5, y5);
UpdateDOM(r5, "result5");
UpdateDOM(r1 + r2 + r3 + r4 + r5, "total");

You can go further and add another function that wraps these two functions with accepting x, y, element parameters and returning the result for the total.

function Multiply(x,y) {
    return x.value * y.value;    
}
function UpdateDOM(value, element) {
    document.getElementById(element).innerHTML = value + " g/mol";
}
function DisplayResult(x, y, element) {
    var result = Multiply(x,y);
    UpdateDOM(result, element);
    return result;
}
var total = DisplayResult(x1, y1, "result1") 
            + DisplayResult(x2, y2, "result2") 
            + DisplayResult(x3, y3, "result3") 
            + DisplayResult(x4, y4, "result4")
            + DisplayResult(x5, y5, "result5");
UpdateDOM(total, "total");

Upvotes: 0

jfriend00
jfriend00

Reputation: 707526

Local variables are private to a particular function and only exist within that function during the execution of the function and/or until any closures within that function complete. You simply can't access them from outside the function and, even if you could, they are no longer in existence after the function runs. So, trying to access them is just not the right way to think about this problem.

Instead, what I would suggest is a single function that carries out the same work but returns the calculation as a return value that you can collect after you call it. You can also pass in the id value where you want to set the calculation in the DOM as an argument so all 5 calls to the function can use the exact same code like this:

function Multiply(x, y, id) {
    var result = x.value * y.value;
    document.getElementById(id).innerHTML = result + " g/mol";     
    return result;
}

var total = Multiply(a, b, "result");
total += Multiply(c, d, "result2");
total += Multiply(e, f, "result3");
total += Multiply(g, h, "result4");
total += Multiply(i, j, "result5");
document.getElementById("total").innerHTML = total + " g/mol";

Depending upon where the x, y arguments come from, you could probably turn these 5 function calls into a single loop with one function call inside the loop.

It's worth remembering the DRY principle (don't repeat yourself) and anytime you see multiple copies of the same code, figure that you should either repeat some operation in a loop, factor common code into a multi-use function or both.

Upvotes: 1

Related Questions