Javascript value of input

Question

This is supposed to calculate circumference, however, I am only getting a zero returned. What am I doing wrong?

<html>
<head>
<script type="text/javascript">
    var index = false;
    var text = "This text shifts";

var Pi = 3.14159265;
    var dia = document.getElementById("txtdia");  
var circumf =  dia * Pi;

    function DisplayText(){

        document.getElementById("txtcircumf").value = circumf;
    }
</script>
</head>
<body>
<form> 
   <input type="text" id="txt1"/>
   <input type="text" id="txt2"/><br>
   <input type="text" name="txtdia" />
   <input type="text" name="txtcircumf" />  
   <input type="button" value="Change Text" onclick="DisplayText()"/>
</form>
</body>
</html>

Instead of var Pi = ...; you could just use the Math object's constants -- Math.PI — Sterling Archer
– Sterling Archer, Commented Jan 2, 2014 at 17:04

Adam Rackis · Accepted Answer · 2014-01-02 17:10:10Z

2

The primary problem you have is that this script will run prior to your dom being ready. As a result, even if you were properly grabbing the diameter's value it still wouldn't work, since document.getElementById("txtdia") wouldn't return anything.

I would just fetch the diameter's value each time.

function DisplayText(){
    var dia = document.getElementById("txtdia").value;  
    var circumf =  dia * Pi;
    document.getElementById("txtcircumf").value = circumf;
}

The other option of course is to put this entire script after your html. Ie

</body>

<script type="text/javascript">
    var index = false;
    var text = "This text shifts";

edited Jan 2, 2014 at 17:10

answered Jan 2, 2014 at 17:03

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

3 Comments

R2 Builder Over a year ago

Fantastic, just learning javascript. not sure how you got this question and then wrote the answer so fast, within 3 minutes. Crazy FAST! anyway Thanks so much, it works perfect.

Adam Rackis Over a year ago

@R2Builder - glad to help. Be sure to accept the best answer by clicking the checkmark next to it. (The best answer, which definitely may not be mine, given what others have posted)

R2 Builder Over a year ago

Ok I see it now checked green

Jamiec · Accepted Answer · 2014-01-02 17:10:30Z

There are 3 distinct issues which you need to fix for this to work correctly.

txtcircumf and textdia are the name of the elements, not the id, so using document.getElementById will fail.

Fix: Add that as an id onto the elements in question:
```
<input type="text" name="txtdia" id="txtdia" />
<input type="text" name="txtcircumf" id="txtcircumf" />  
```
The elements are not present when the script first runs. This is the issue described by @AdamRakis and his fix is probably best - always retrieve the value when you need it:
```
function DisplayText(){
    var dia = document.getElementById("txtdia").value;  
    var circumf =  dia * Pi;
    document.getElementById("txtcircumf").value = circumf;
}
```
A minor point, but when you read the .value of a field you get text, as you are doing a mathematical equation it is common practice to ensure the value you're wouking with is numeric. You can use parseFloat for this:
```
function DisplayText(){
    var dia = parseFloat(document.getElementById("txtdia").value);  
    var circumf =  dia * Pi;
    document.getElementById("txtcircumf").value = circumf;
}
```

Sterling Archer · Accepted Answer · 2014-01-02 17:18:47Z

0

I made a couple structural changes that improve the overall quality of your code :) (see the arrows for changes)

<html>
<body>
<form> 
   <input type="text" id="txt1"/>
   <input type="text" id="txt2"/><br>
   <input type="text" name="txtdia" />
   <input type="text" name="txtcircumf" />  
   <input type="button" id="derp" value="Change Text" /> //<-- added ID, removed inline JS
</form>

<script type="text/javascript">
document.getElementById("derp").onclick = function() { //<-- use this style instead of inline onclicks!
    var index = false;
    var text = "This text shifts";

    var dia = document.getElementById("txtdia").value; //<-- .value, not the whole element!  
    var circumf =  dia * Math.PI; //<-- Math.PI is an object constant, very handy
    document.getElementById("txtcircumf").value = circumf;
    //no more standard function!
}
</script>

</body>
</html>

edited Jan 2, 2014 at 17:18

answered Jan 2, 2014 at 17:08

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

5 Comments

R2 Builder Over a year ago

Thanks, but the above code causes Error in IE 9 >> Unable to set value of the property 'onclick': object is null or undefined on line 4

Sterling Archer Over a year ago

What error would that be? I forgot since you're doing math on an input you'll have to parsefloat the .value

R2 Builder Over a year ago

Math.PI must need a library or somehting, when I use it I get "NaN" for an answer on stead of a cricumference. also error on line 4

Sterling Archer Over a year ago

No library needed sir, like I said you need to parsefloat the element value, else you'll be doing math with a string with will yield NaN (not a number)

R2 Builder Over a year ago

thanks all... I tried each one but the first one does the trick.

Collectives™ on Stack Overflow

Javascript value of input

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related