CODEWITHSUNDEEP
javascriptjquery
user0111001101
user0111001101

Reputation: 187

javascript to > jquery

i have a script like:

<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>

and the html is:

<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" />

Now the value of var are showed inside the field, but if i want tho show it inside <h1></h1> tag, what i need to to? Need to use jQquery? (fore live results). What can i do?

Upvotes: 0

Views: 105

Answers (2)

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

Use document.createElement("h1") and append somewhere, in my case to a 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>

Upvotes: 1

Aruna Warnasooriya
Aruna Warnasooriya

Reputation: 339

HTML :

<h1 id="res">Result : </h1>

Javascript :

<script>
$("#res").html(lordo); //Here's what you need to display.
</script>

Use #id inside $() to call html element.

Upvotes: 0

Related Questions