CODEWITHSUNDEEP
javascripthtml
user10102331
user10102331

Reputation:

I am getting a empty string for my function's return value

I am getting a empty string when I try to use my function's return value in another function. I declared the function value as variable so I am not sure why I am getting that.

const fnCalIn = calIn();
const fnCalOut = calOut();

//to get the value in the calIn input field and turn it into a number then print to page
function calIn() {
  var calIn = document.getElementById("calIn").value;
  var clCalIn = Number(calIn);
  document.getElementById("demo-1").innerHTML = clCalIn;
  return clCalIn;
};

//to get the value in the calOut input field and turn it into a number then print to page
function calOut() {
  var calOut = document.getElementById("calOut").value;
  var clCalOut = Number(calOut);
  document.getElementById("demo-2").innerHTML = calOut;
  return calOut;
};

// Where I want to get the difference of the calOut and calIn values and print that to the page
function calDt() {
  var clCalDt = fnCalOut - fnCalIn;
  document.getElementById("calDt").innerHTML = clCalDt;
}
<h1 class="current">Today</h1>
<div>
  <h3>Calories in </h3>
  <input id="calIn">
  <button onclick="calIn()">Get value</button>
  <p id="demo-1"></p>
</div>

<div>
  <h3>Calories Out </h3>
  <input id="calOut">
  <button onclick="calOut()">Get value</button>
  <p id="demo-2"></p>
</div>

<div>
  <h3>Deficit </h3>
  <div>
    <p id="calDt"></p>
    <button onclick="calDt()">Get value</button>
  </div>
</div>

I keep getting a 0 When I change the HTML to clCalDt, I should get some value depending on what I enter in my input field but I get nothing. And when I try logging the values I get an empty string "".

Upvotes: 1

Views: 190

Answers (2)

SScotti
SScotti

Reputation: 2338

Couple of issues. You were returning return calOut; and not return clCalOut, and in the calculation you need to call the functions. Might want to check to make sure then entry is actually a number somewhere.

//to get the value in the calIn input field and turn it into a number then print to page
function calIn() {
  var calIn = document.getElementById("calIn").value;
  var clCalIn = Number(calIn);
  document.getElementById("demo-1").innerHTML = clCalIn;
  return clCalIn;
};

//to get the value in the calOut input field and turn it into a number then print to page
function calOut() {
  var calOut = document.getElementById("calOut").value;
  var clCalOut = Number(calOut);
  document.getElementById("demo-2").innerHTML = calOut;
  return clCalOut;
};

// Where I want to get the difference of the calOut and calIn values and print that to the page
function calDt() {
  var clCalDt = calOut() - calIn();
  document.getElementById("calDt").innerHTML = clCalDt;
}
<h1 class="current">Today</h1>
<div>
  <h3>Calories in </h3>
  <input id="calIn">
  <button onclick="calIn()">Get value</button>
  <p id="demo-1"></p>
</div>

<div>
  <h3>Calories Out </h3>
  <input id="calOut">
  <button onclick="calOut()">Get value</button>
  <p id="demo-2"></p>
</div>

<div>
  <h3>Deficit </h3>
  <div>
    <p id="calDt"></p>
    <button onclick="calDt()">Get value</button>
  </div>
</div>

Upvotes: 0

Nir Alfasi
Nir Alfasi

Reputation: 53535

You're calling the functions (fnCalIn and fnCalOut) only once at the beginning and then their values remain static and any changes in the page don't affect them. Try changing 

var clCalDt = fnCalOut - fnCalIn;

to:

var clCalDt = calOut() - calIn();

in order for the values to be re-calculated.

Upvotes: 3

Related Questions