javascript - 对动态更新 javascript 值执行数学运算

Question

我已经想出了如何根据表单的当前输入动态更新我的 html。但是，我不知道如何对此值（即值 * 5）执行任何数学运算，并显示该结果，而不仅仅是在表单中显示该值。

这是一个现场示例：https ://dl.dropboxusercontent.com/u/14749627/happy2/number.html

这是我的javascript：

<script>
window.onload = function() {

var purchase_quantity = document.getElementById('purchase_quantity');
purchase_quantity.onclick = updateNameDisplay;
purchase_quantity.onclick = updateNameDisplay;
purchase_quantity.onclick = updateNameDisplay;
function updateNameDisplay() {
  document.getElementById('nameDisplay').innerHTML = this.value || "1";
 }
};
</script>

Answer 1

Campari 的解决方案有效，但作为一个好习惯，您应该明确地将其转换为数字。如果您尝试添加，它不会按预期工作。另外，感谢 Oriol 指出另一个问题。

var purchase_quantity = document.getElementById('purchase_quantity');
purchase_quantity.onclick = updateNameDisplay;

function updateNameDisplay() {
    document.getElementById('nameDisplay').innerHTML = 
        this.value.length ? Number(this.value) * 5 : "1";
}

演示

Answer 2

啊，现在我看到了问题。显而易见的解决方案

document.getElementById('nameDisplay').innerHTML = this.value*5 || "1";

不起作用，因为 if this.valueis "0"， then "0"*5is 0，这是假的，所以"1"被返回。

然后，您可以使用类似的东西

document.getElementById('nameDisplay').innerHTML = (this.value || "1") * 5;

或者

document.getElementById('nameDisplay').innerHTML = this.value ? this.value*5 : "1";

取决于你想要什么。

Answer 3

要获得您的价值 x 5？很简单：

document.getElementById('nameDisplay').innerHTML = this.value * 5 || "1";
                                                   ^^^^^^^^^^^^^^

看看这个小提琴。

Answer 4

如果我正确理解了您所说的话，那么您希望将元素数据存储为变量。

var 结果 = this.value * 5; document.getElementById('nameDisplay').innerHTML = 结果；

如果我误解了您的问题，请纠正我。