Javascript code not showing correct output

Question

i am working on javascript to create weight conversion . but unfortunately i am not getting correct outut rather then i am getting NaN in my required text fields

<script>
function Convert(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*2.2046;
  document.getElementById("outputGrams").innerHTML=valNum*1000;
  document.getElementById("outputMilligrams").innerHTML=valNum*1000000;
  document.getElementById("outputUsTons").innerHTML=valNum*0.0011023;
  document.getElementById("outputOunces").innerHTML=valNum*35.274;
}
</script>

<form name="Weightconverter">
		<fieldset class="container">
		<label for="enterWeight" >Enter Weight in Kilogram: </label>
		<input type="text" id="kgid" name="enterWeight"/>
		<input  type="button" id="enterWeight" style="background-color:#069; width:100px; padding:5px; text-align:center" value="Convert"  onClick="Convert(this.value)"/>
		</fieldset>
        </p>
        <div class="container">
		<p>Pounds: <span id="outputPounds"></span></p>
		<p>Grams: <span id="outputGrams"></span></p>
		<p>Milligrams: <span id="outputMilligrams"></span></p>
		<p>UsTons: <span id="outputUsTons"></span></p>
		<p>Ounces: <span id="outputOunces"></span></p>
        </div>

this.value at the call point would be the button value which is not a number hence the NaN when you treat it as one. — Alex K.
– Alex K., Commented Jan 15, 2018 at 18:06
this.value would be the BUTTON value. A simple console.log(valNum) would have showed you it. — epascarello
– epascarello, Commented Jan 15, 2018 at 18:09

zb22 · Accepted Answer · 2018-01-15 18:42:31Z

Try this:

 
  function Convert() {
   var valNum = document.getElementById("kgid").value;
 
    document.getElementById("outputPounds").innerHTML=valNum*2.2046;
    document.getElementById("outputGrams").innerHTML=valNum*1000;
    document.getElementById("outputMilligrams").innerHTML=valNum*1000000;
    document.getElementById("outputUsTons").innerHTML=valNum*0.0011023;
    document.getElementById("outputOunces").innerHTML=valNum*35.274;
  }

<form name="Weightconverter" onsubmit="return false">
		<fieldset class="container">
		<label for="enterWeight" >Enter Weight in Kilogram: </label>
		<input type="text" id="kgid" name="enterWeight"/>
    <button id="enterWeight" style="background-color:#069; width:100px; padding:5px; text-align:center" onClick="Convert()">
        Convert
    </button> 
    
		</fieldset>
        </p>
        <div class="container">
		<p>Pounds: <span id="outputPounds"></span></p>
		<p>Grams: <span id="outputGrams"></span></p>
		<p>Milligrams: <span id="outputMilligrams"></span></p>
		<p>UsTons: <span id="outputUsTons"></span></p>
		<p>Ounces: <span id="outputOunces"></span></p>
        </div>

You need to get the value of the input field, with document.getElementById("kgid").value and you need to add onsubmit="return false" to your form as well because your form doesn't suppose to send its data to anywhere.

SSD · Accepted Answer · 2018-01-15 18:50:28Z

0

You could also use parseInt inside your function.

Browsers sometime interpret the number as string, input from text field, resulting in NaN

 <script>
function Convert(v) {
  var valNum = parseInt(v);
    //or var valNum = Number(v);
document.getElementById("outputPounds").innerHTML=valNum*2.2046;
  document.getElementById("outputGrams").innerHTML=valNum*1000;
  document.getElementById("outputMilligrams").innerHTML=valNum*1000000;
  document.getElementById("outputUsTons").innerHTML=valNum*0.0011023;
  document.getElementById("outputOunces").innerHTML=valNum*35.274;
}
</script>

edited Jan 15, 2018 at 18:50

answered Jan 15, 2018 at 18:41

SSD

1,4012 gold badges14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript code not showing correct output

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related