javascript - 使用 "*"运算符在输入内进行乘法

Question

我正在尝试将 input 中输入的乘法替换为其解决方案。

基本上，当您在 input 中输入 3*3 时，我希望我的 javascript 代码将 3*3 替换为 >9.

可能并不难获得，但我对 javascript 完全是菜鸟。到目前为止我已经明白了，但我应该错过一个关键点!

感谢您的帮助:)

function multiply() {
  var string = document.getElementById("mult").value;
  var array = string.split("*");
  var res = Number(array[0]*array[1]);
  document.getElementById("res").value = res;
}

input{width:80px; text-align:right;}
input[readonly]{border:0;}

entrer: <input type="text" id="mult" onblur="multiply()">
<br>result: <input type="text" id="res" readonly>

Answer 1

您的代码实际上像现在一样工作。只需确保在输入方程式后按 Tab 键退出输入字段，您就会看到它完成其工作。这是因为您的代码在 blur 事件上运行，即焦点离开元素时。

但是，就您的转换代码而言:

Number(array[0]*array[1])

当您需要先将每个数组值转换为数字然后执行操作时，尝试转换 array[0] 和 array[1] 的乘积数学。

Number(array[0]) * Number(array[1])

现在，您可以在每个需要转换的值前面添加一个 +，而不是 Number()。

+array[0] * +array[1]

但是，实际上，每当您尝试对字符串进行乘法、除法或减法时，它们都会自动转换为数字，因此您实际上根本不需要这样做。

最后，由于您只是显示结果并且不希望用户能够修改它，因此只需将其放入常规元素中，例如 span 而不是表单字段元素然后您必须将其设置为只读。表单字段主要用于收集信息，而不是显示信息。当您使用非表单字段元素时，不使用 value 属性，而是使用 .textContent (当存在纯文本时)或 .innerHTML(当字符串包含要解析的 HTML 时)。

function multiply() {
  var string = document.getElementById("mult").value;
  var array = string.split("*");
  var res = array[0] * array[1];
  document.getElementById("res").textContent = res;
}

input{width:80px; text-align:right;}
input[readonly]{border:0;}

entrer: <input type="text" id="mult" onblur="multiply()">
<br>result: <span id="res"></span>