我为函数的返回值得到一个空字符串

Question

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 "".

Answer 1

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.

Answer 2

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>