Question

JavaScript代码：

function suma(){
        var sum1 = document.getElementById("sum1");
        var sum2 = document.getElementById("sum2");
        var input = document.getElementById("resultado");
        resultado = (sum1.value * sum2.value);
        input.value= resultado;
    }

如何对变量resultado的答案进行1％的计算并将答案放入premium内？

我这样做的代码：

function percentage(){
        var resultado = document.getElementById("resultado").value;
        var input = document.getElementById("premium");
        var premium = (0.01*resultado.value);
        input.value = premium;

    }

html代码

    <input type="number" class="form-control" required onblur="if(this.value 
     == ''){this.value='0'}" onKeyUp="suma();"  id="sum2"   name="Weight" 
    value="0" />
    <input type="text" class="form-control" onblur="if(this.value == '') 
    {this.value='0'}"  onKeyUp="suma();" id="sum1"    name="variable" 
    value="3.25" readonly="readonly" />
    <input  type="text" class="form-control" name="shipping_subtotal" 
    id="resultado" value="0" />
    <input type="number" class="form-control"  id="insurance" 
    name="insurance" onblur="if(this.value == ''){this.value='0'}"  
    name="variable" value="0.01" readonly="readonly" >
    <input type="number" class="form-control"  id="premium" name="premium" 
    value="0" onKeyUp "percentage();" >

Answer 1

您在代码中有很多小错误。不过请放心，在这里很容易忽略它们。开发时要牢记的一件事是将您的关注点分开，因为您将来的工作以及其他与您的代码一起工作的开发人员将感谢您。在这种情况下，我将关注点分离的意思是逻辑与模板。 HTML是模板的归属，而JavaScript是您的逻辑。当您编写内联JavaScript时，例如<input onblur="if(this.value == ''){this.value='0'}">，这会使您的JavaScript非常难以遵循和维护。在您的JavaScript文件中，您可以改用document.getElementById('demo').onblur = if(this.value == ''){this.value='0'};，现在所有逻辑都可以在一个地方找到。就个人而言，我更喜欢事件侦听器，因为与onblur不同，您可以为给定事件分配多个功能，并且覆盖其他地方编写的任何功能的风险较小。

假设var el = document.getElementById('demo');

方法1：

el.onblur = if(this.value == ''){this.value='0'};

// This overwrites the onblur function from the line above
el.onblur = alert('hello');

方法2：

el.addEventListener('blur', function() { if(this.value == ''){this.value='0'} });

// This does not overwrite the function above,
// instead, it just adds another function to the event.
el.addEventListener('blur', function() { alert('hello'); });

此外，我相信您的代码将对您的错误进行一些修复。为了帮助您，我在上面编写了脚本的替代方法。不过，我不确定我是否能按照您的意图来完成所有操作，因此请随时对其进行调整，使其完全属于您自己。

var sum1 = document.getElementById("sum1");
var sum2 = document.getElementById("sum2");
var resultado = document.getElementById("resultado");
var premium = document.getElementById("premium");
var insurance = document.getElementById("insurance");

function calculateFields() {
  var suma = (sum1.value * sum2.value);
  resultado.value = suma;
  premium.value = (0.01 * suma);
}

var inputs = [sum1, sum2, resultado, premium, insurance];
inputs.forEach(function(el) {
  el.addEventListener('blur', function() {
    this.value = this.value === '' ? 0 : this.value;
  });
  el.addEventListener('input', calculateFields);
});

请仔细阅读jsfiddle上的代码。

如何获得答案的结果并对该结果进行计算

1 个答案: