javascript to > jquery

Question

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?

document.getElementsByTagName('h1')[indexofh1].innerHTML = yourvar — putvande
– putvande, Commented Jun 13, 2016 at 11:07
As a side note: <input> is one of those tags that do not require closing. — Azamantes
– Azamantes, Commented Jun 13, 2016 at 11:39

Parvez Rahaman · Accepted Answer · 2016-06-13 11:55:07Z

1

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>

answered Jun 13, 2016 at 11:55

Parvez Rahaman

4,3973 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user0111001101 Over a year ago

Thank you it's working, but if i want tho show in the html? If i press CTRL+U i can't see the tag h1 & h2 inside the show id, i need to generate pdf from my form's results

Parvez Rahaman Over a year ago

@user0111001101 you can't see by pressing CTRL+U because it's created dynamically but you can see by pressing CTRL+SHIFT+I in inspect element that mean within pdf generation it will show fine.

GreyRoofPigeon · Accepted Answer · 2016-06-13 11:18:46Z

0

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.

edited Jun 13, 2016 at 11:18

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

answered Jun 13, 2016 at 11:13

Aruna Warnasooriya

3391 silver badge9 bronze badges

Collectives™ on Stack Overflow

javascript to > jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related