javascript 到 > jquery

Question

我有一个像这样的脚本:

<script>
function vatCalculation() {
    var netto = document.getElementById('netto').value;
    var lordo = parseFloat(parseFloat(netto) / parseFloat(0.8)).toFixed(2);
    var ritenuta = parseFloat(parseFloat(lordo) * parseFloat(0.2)).toFixed(2);

    document.getElementById('lordo').value = lordo;
    document.getElementById('ritenuta').value = ritenuta;
}
</script>

html 是:

<input name="netto" id="netto" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />

<input name="lordo" id="lordo" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />

<input name="ritenuta" id="ritenuta" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />

现在 var 的值显示在字段内，但如果我想将其显示在 <h1></h1> 内标签，我需要做什么？需要使用jQquery吗？ (在实时结果之前)。我能做什么？

Answer 1

使用 document.createElement("h1") 并附加到某处，在我的例子中附加到 div。

function vatCalculation() {
  var netto = document.getElementById('netto').value;
  var lordo = parseFloat(parseFloat(netto) / parseFloat(0.8)).toFixed(2);
  var ritenuta = parseFloat(parseFloat(lordo) * parseFloat(0.2)).toFixed(2);

  document.getElementById('lordo').value = lordo;
  document.getElementById('ritenuta').value = ritenuta;
  
  var h1 = document.createElement("h1");
  var node = document.createTextNode('Lordo :'+lordo);
  var h2 = document.createElement("h1");
  var node2 = document.createTextNode('Ritenuta :'+ritenuta);
  h1.appendChild(node); h2.appendChild(node2);

  var element = document.getElementById("show");
  element.innerHTML = '';
  element.appendChild(h1); element.appendChild(h2);
}

<input name="netto" id="netto" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />

<input name="lordo" id="lordo" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />

<input name="ritenuta" id="ritenuta" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<div id="show"></div>