Using html input as parameters in an onclick JavaScript function?

Question

I've written a JavaScript function that takes an array of numbers, performs some simple math, and returns a sentence with the result. I would like this function to run using user-input values on the html page.

The way I'm doing it is by creating an array out of the document.ElementbyId("suchandsuch").values, and then passing that array as the parameters for the function. However, when I open my html and input numbers, then press my 'Calculate" button (which is set to run the JS function using onclick"") it returns the blank template literal from the JS function. "Blah blah ___, blah blah 0." When I run the Javascript on its own, it works fine, so I've convinced that the problem isn't my function--it's just that the function isn't receiving the user input values. Does my button onclick"-" need to include some kind of confirm/submit before the values can be passed to the function? Or is my array not created correctly?

I tried renaming all my variables/ids to different variations on seconds, minutes, days, (se, mi, da) etc because the only reason I could think of was that they were predefined somewhere. I have a feeling there's just some element of validating user input that that I'm not aware of -- I know js but really am not familiar with html. I've tried a bunch of different permutations of onclick"myFunction" and the values just don't seem to be getting passed.

 var seconds = document.getElementById("se").value; var Minutes = document.getElementById("mi").value; var Hours = document.getElementById("ho").value; var Weeks = document.getElementById("we").value; var Days = document.getElementById("da").value; var Months = document.getElementById("mo").value; var newActivity = document.getElementById("activity").value; var idArray = [seconds, Minutes, Hours, Weeks, Days, Months]; function bezosEarnings(s = 0, m = 0, h = 0, d = 0, w = 0, mo = 0) { var a = 1 * s; var b = 60 * m; var c = 3600 * h; var d = 86400 * d; var e = 604800 * w; var f = 2419300 * mo; var total = (a + b + c + d + e + f) * 2489; return total.toLocaleString(); } var bezosResult = bezosEarnings(...idArray); var returnSentence = `While you were ${newActivity}, Jeff Bezos made $ ${bezosResult}`; function calcuLatte() { console.log(returnSentence); }

 What did you do today? <input type="string" id="activity" placeholder="Phrased as a gerund:`" /> Seconds: <input type="number" id="se" /> Minutes: <input type="number" id="mi" /> Hours: <input type="number" id="ho" /> Days: <input type="number" id="da" /> Weeks: <input type="number" id="we" /> Months: <input type="number" id="mo" /> <button onclick="calcuLatte()">Calculate</button>

I'm expecting // "While you were yawning, Jeff Bezos made $7486." What returns is // "While you were, Jeff Bezos made $

Answer 1

Try something like this. You need to update variables cause when you declared variables outside method they will have same value as they had before.

function bezosEarnings(s = 0, m = 0, h = 0, d = 0, w = 0, mo = 0) {
  var a = 1 * s;
  var b = 60 * m;
  var c = 3600 * h;
  var d = 86400 * d;
  var e = 604800 * w;
  var f = 2419300 * mo;
  var total = (a + b + c + d + e + f) * 2489;
  return total.toLocaleString();
}

function calcuLatte() {

var seconds = document.getElementById("se").value;
var Minutes = document.getElementById("mi").value;
var Hours = document.getElementById("ho").value;
var Weeks = document.getElementById("we").value;
var Days = document.getElementById("da").value;
var Months = document.getElementById("mo").value;

var newActivity = document.getElementById("activity").value;
var idArray = [seconds, Minutes, Hours, Weeks, Days, Months];

var bezosResult = bezosEarnings(...idArray);
var returnSentence = `While you were ${newActivity}, Jeff Bezos made $ ${bezosResult}`;

  console.log(returnSentence);
}

Answer 2

Your document.getElementById("yourId").value will return you a string . You will need to convert it to number . Try

parseInt(document.getElementById("yourId").value)

Answer 3

It is because, you are getting the input values on page load . You should get the values after you fill inputs and click calculate .

Hope this helps.

 function bezosEarnings() { var seconds = document.getElementById("se").value; var Minutes = document.getElementById("mi").value; var Hours = document.getElementById("ho").value; var Weeks = document.getElementById("we").value; var Days = document.getElementById("da").value; var Months = document.getElementById("mo").value; var newActivity = document.getElementById("activity").value; var a = 1 * seconds; var b = 60 * Minutes; var c = 3600 * Hours; var d = 86400 * Days; var e = 604800 * Weeks; var f = 2419300 * Months; var total = (a + b + c + d + e + f) * 2489; return `While you were ${newActivity}, Jeff Bezos made $ ${total.toLocaleString()}`; } function calcuLatte() { console.log(bezosEarnings()); }

 What did you do today? <input type="string" id="activity" placeholder="Phrased as a gerund:`" /> Seconds: <input type="number" id="se" /> Minutes: <input type="number" id="mi" /> Hours: <input type="number" id="ho" /> Days: <input type="number" id="da" /> Weeks: <input type="number" id="we" /> Months: <input type="number" id="mo" /> <button onclick="calcuLatte()">Calculate</button>