Resolved Gathering userinput for a small javascript calculator (JS and <form>'s)

[BZeiler]

Hey there CodingForums!
I hope the subject of this post was ok (I read that you are having some problems with alot of strange subjects)

What i am trying to do is the following:
I read a tutorial on objects and thought i would try it out. The tutorial taught me how to make a function calculating the areal and circumspherence of the circle where the user input would be the radius.

To sum up: I want to make it possible for the user to write, say, "2" in the form text field and click "Calculate" and then the text will appear w/o reloading the page. I could easily do this by removing the objects but as i am training my object skills i would like to know if it is possible to do this with objects?

The problem is that i dont know how to take the user input. I know that in PHP it is "$_POST["name"]" but what is it in JS? And is it possible to jump into PHP and use $_POST inside the JS script or how can this be done?

This is my code so far (It prolly looks strange but i really dont know how to get it to work).

<script type="text/javascript">
function Circle(radius){
	this.radius = radius;
	this.getArea = function(){
		return (this.radius*this.radius*3.14);
	}
	this.getOmkreds = function(){
		var diameter = this.radius*2;
		var omkreds = diameter*3.14;
		return omkreds;
	}
}
var bigCircle = new Circle(100);

document.write("The areal of your circle is: "+bigCircle.getArea()+"<br>");
document.write("The circumsference of your circle is: "+bigCircle.getOmkreds()+"<br>");
</script>

<form name="input" method="POST">
	<input type="text" name="radius" />
	<input type="button" value="Calculate" />
</form>

As you can see i have a predefined object: bigCircle. What i want to do is change the new Circle(100) to new Circle(USER INPUT HERE).

Does any of this make sense and is it even possible?

- BZeiler

[Philip M]

Try this:-

<script type="text/javascript">
function Circle(){
var circlerad = document.getElementById("radius").value;
if (isNaN(circlerad) || circlerad <0 || circlerad == "") {
alert ("Invalid input data!");
document.getElementById("radius").value ="";
return false;
}
var area = 2 * circlerad * 3.14;
var circum = circlerad * circlerad * 3.14;


document.getElementById("area").innerHTML = "The area of your circle is: " + area +"<br>";
document.getElementById("circumference").innerHTML = "The circumference of your circle is: "+ circum + "<br>";

}

</script>

Enter the radius of the circle <input type="text" name="radius" size = "4" id = "radius"/>
<input type="button" value="Calculate" onclick = "Circle()"/>
<br><br>
<span id = "area"></span><br>
<span id = "circumference"></span>

Note that document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page.




"When you've got a mountain to climb, you may as well throw everything into the kitchen sink straight away." - Football commentator.

[BZeiler]

Hey there Philip, thanks for you fast answer!
As far as i can tell the code you put out for me there isn't very "object" minded but it was EXACTLY what i was looking for. I have got to use "getElementById" some more, it works like a charm!

Thanks for the help, much love!

- BZeiler

[Philip M]

Originally Posted by BZeiler

Hey there Philip, thanks for you fast answer!
As far as i can tell the code you put out for me there isn't very "object" minded but it was EXACTLY what i was looking for. I have got to use "getElementById" some more, it works like a charm!

Thanks for the help, much love!

- BZeiler

There is no point in using a sledgehammer to crack a nut. OOP is most appropriate where a piece of code must be re-used.

[BZeiler]

There is no point in using a sledgehammer to crack a nut

You are very right, but... well... Yes. You are very right

- Have a good day!