CODEWITHSUNDEEP
javascripttextbox
R2 Builder
R2 Builder

Reputation: 99

Javascript value of input

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>

Upvotes: 0

Views: 84

Answers (3)

Sterling Archer
Sterling Archer

Reputation: 22395

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>

Upvotes: 0

Jamiec
Jamiec

Reputation: 136094

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

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

  2. 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;
}

  3. 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;
}

Upvotes: 2

Adam Rackis
Adam Rackis

Reputation: 83358

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

Upvotes: 2

Related Questions