尝试在使用 HTML 和 Javascript 的方程式中使用输入的用户变量答案

【问题标题】：Trying to use an inputted user var in an equation using HTML and Javascript尝试在使用 HTML 和 Javascript 的方程式中使用输入的用户变量
【发布时间】：2015-09-28 08:09:21
【问题描述】：

我是 Javascript 新手，正在尝试创建一个使用特定方程式计算结果的表单。我试图使 var x 成为用户输入的基本价格数字，然后在等式中使用该 var。我想知道我的问题是否是我缺少提交输入，然后以某种方式在输入时注册了 x？这是我到目前为止所拥有的：

<input type="number" id="baseprice">

<br><br>

Result:

<p id="LESResult"></p>

<script>

var x = document.getElementById("baseprice").value;
var y = 100;
var d = 30;
var z = (x)/(y-d);
var m = z * y;
var num = m;
var n = num.toFixed(2);
document.getElementById("LESResult").innerHTML = n;

</script>

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以像这样添加一个按钮并为其附加一个事件侦听器：

<input type="number" id="baseprice">
<button onclick="calculate_result()">submit</button>

<br><br>

Result:

<p id="LESResult"></p>

<script>

calculate_result = function() {
  var x = document.getElementById("baseprice").value;
  var y = 100;
  var d = 30;
  var z = (x)/(y-d);
  var m = z * y;
  var num = m;
  var n = num.toFixed(2);
  document.getElementById("LESResult").innerHTML = n;
}

</script>

【讨论】：

谢谢，这正是我想要的！

【解决方案2】：

问题是您的代码在页面加载时立即运行一次。您需要触发该代码以响应用户所做的事情。有一个名为"input" event 的事件由用户编辑输入触发。将事件处理程序绑定到您的输入，如下所示：

document.getElementById("baseprice").addEventListener("input", function () {
    var x = this.value;
    var y = 100;
    var d = 30;
    var z = (x) / (y - d);
    var m = z * y;
    var num = m;
    var n = num.toFixed(2);
    document.getElementById("LESResult").innerHTML = n;
});

注意函数的第一行使用this.value而不是调用.getElementById()——在事件处理函数中this是对输入元素的引用，所以你不需要再次调用.getElementById() .

演示：http://jsfiddle.net/8rq7ab71/

其他选项包括绑定到“更改”或“模糊”事件，这两个事件都只会在用户完成编辑或添加“计算”按钮时触发并在其上放置一个“点击”处理程序。另见：the addEventListener() method。

【讨论】：