使用 html 輸入作為 onclick JavaScript ZC1C425268E68385D1AB5074C17A7 中的參數

Question

我寫了一個 JavaScript function ，它接受一個數字數組，執行一些簡單的數學運算，然后返回一個帶有結果的句子。 我希望這個 function 使用 html 頁面上的用戶輸入值運行。

我這樣做的方法是從 document.ElementbyId("suchandsuch").values 創建一個數組，然后將該數組作為 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.“當我自己運行 Javascript 時，它工作正常，所以我確信問題不是我的功能 - 只是 function 沒有接收用戶輸入值。我的按鈕是否單擊“ -”在將值傳遞給 function 之前需要包含某種確認/提交？還是我的數組沒有正確創建？

我嘗試將所有變量/id 重命名為秒、分鍾、天、（se、mi、da）等的不同變體，因為我能想到的唯一原因是它們是在某個地方預定義的。 我感覺只有一些我不知道的驗證用戶輸入的元素——我知道 js，但真的不熟悉 html。 我已經嘗試了 onclick"myFunction" 的一系列不同排列，但這些值似乎沒有被傳遞。

 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>

我期待//“當你打哈欠時，傑夫貝索斯賺了 7486 美元。” 返回的是 //“當你在的時候，傑夫貝索斯賺了 $

Answer 1

嘗試這樣的事情。 您需要更新變量，因為當您在方法外部聲明變量時，它們將具有與以前相同的值。

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

您的document.getElementById("yourId").value將返回一個string 。 您需要將其轉換為number 。 嘗試

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

Answer 3

這是因為，您在page load上獲得了輸入值。 您應該在填寫輸入並單擊計算后獲取值。

希望這可以幫助。

 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>