时间戳

首页 > 解决方案 > 在 onclick JavaScript 函数中使用 html 输入作为参数？

javascript - 在 onclick JavaScript 函数中使用 html 输入作为参数？

问题描述

我编写了一个 JavaScript 函数，它接受一个数字数组，执行一些简单的数学运算，然后返回一个带有结果的句子。我希望这个函数使用 html 页面上的用户输入值运行。

我这样做的方法是从 document.ElementbyId("suchandsuch").values 创建一个数组，然后将该数组作为函数的参数传递。但是，当我打开我的 html 并输入数字，然后按我的“计算”按钮（设置为使用 onclick 运行 JS 函数“”）时，它会从 JS 函数返回空白模板文字。“等等等等 ___，等等等等0.“当我自己运行 Javascript 时，它运行良好，所以我确信问题不在于我的函数 - 只是该函数没有接收用户输入值。我的按钮是否点击” -”需要在将值传递给函数之前包含某种确认/提交？还是我的数组没有正确创建？

我尝试将所有变量/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 美元。” 返回的是 //“当你在时，杰夫贝佐斯赚了 $

标签： javascripthtml

解决方案

尝试这样的事情。您需要更新变量，因为当您在方法外部声明变量时，它们将具有与以前相同的值。

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);
}

推荐阅读