Log in

View Full Version : Javascript results in text boxes


Johny Appleseed
08-30-2012, 08:26 AM
hello there,
I have recently learned JS and i decided to start making a calculator for my webpage. the calculations went fine, but it's my first time trying to display the results in a text box in a form and i still haven't been able to figure it out. I get the number(s) and operator from a series of 3 prompts which activate when you click a button, and then i included a text box to display the results on mouse over (but i would be just as satisfied if i could just normally display it) , but nothing happens! Its probably from some error in the scripting, but i don't know what! Here is the script:

<script type="text/javascript">
function calculator(){
var number = prompt("Enter the 1st number");
var operator = prompt("Enter the operator (+,-,*,/,^2,^3,^,sqrt(),abs(),1/x,!,sin(),cos(),tan(),cot(),sec(),csc(),ln())");
var number2 = prompt("Enter the 2nd number");

function addition(number,number2) {
return parseInt(number) + parseInt(number2);
}

function factorial(number) {
if ((number == 0) || (number == 1))
return 1
else {
answer = (number * factorial(number-1) )
return answer;
}
}

if (operator == "-"){
var answer=number-number2;
}else if (operator == "*"){
var answer=number*number2;
}else if (operator == "/"){
var answer=number/number2;
}else if (operator == "^2"){
var answer=number*number;
}else if (operator == "+"){
var answer=addition(number,number2);
}else if (operator == "^3"){
var answer=number*number*number;
}else if (operator == "^"){
var answer=Math.pow(number,number2);
}else if (operator == "sqrt()" && number >= 0){
var answer=Math.sqrt(number);
}else if (operator == "sqrt()" && number < 0){
var answer=Math.sqrt(Math.abs(number))+"i";
}else if (operator == "abs()"){
var answer=Math.abs(number);
}else if (operator == "1/x"){
var answer=1/number;
}else if (operator == "!"){
var answer=factorial(number);
}else if (operator == "sin()"){
var answer=Math.sin(number);
}else if (operator == "cos()"){
var answer=Math.cos(number);
}else if (operator == "tan()"){
var answer=Math.tan(number);
}else if (operator == "cot()"){
var answer=Math.cos(number)/Math.sin(number);
}else if (operator == "sec()"){
var answer=1/Math.cos(number);
}else if (operator == "csc()"){
var answer=1/Math.sin(number);
}else if (operator == "ln()"){
var answer=Math.log(number);
}else{
alert("This calculator does not currently support operators other than addition, subtraction, multiplication, division, squaring, cubing, exponentation, square roots, absolute values, reciprocals, factorials, the 6 trig functions and natural logarithms.")
}

function output(answer) {
document.getElementById('display').value = answer;
}

}
</script>

...(I know its long) And here's the corresponding relevent HTML:

<form id="form">
<input type="button" onclick="calculator()" value="Click to Start!" />
<input type="text" id="display" onmouseover="output(answer)" />
</form>

any help would be much appreciated and thanks for your time :)
vwphillips
08-30-2012, 09:04 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">

var answer='Please Click Start';

function calculator(){
document.getElementById('display').value = '';
var number = prompt("Enter the 1st number");
var operator = prompt("Enter the operator (+,-,*,/,^2,^3,^,sqrt(),abs(),1/x,!,sin(),cos(),tan(),cot(),sec(),csc(),ln())");
var number2 = prompt("Enter the 2nd number");

if (operator == "-"){
answer=number-number2;
}
else if (operator == "*"){
answer=number*number2;
}
else if (operator == "/"){
answer=number/number2;
}
else if (operator == "^2"){
answer=number*number;
}
else if (operator == "+"){
answer=addition(number,number2);
}
else if (operator == "^3"){
answer=number*number*number;
}
else if (operator == "^"){
answer=Math.pow(number,number2);
}
else if (operator == "sqrt()" && number >= 0){
answer=Math.sqrt(number);
}
else if (operator == "sqrt()" && number < 0){
answer=Math.sqrt(Math.abs(number))+"i";
}
else if (operator == "abs()"){
answer=Math.abs(number);
}
else if (operator == "1/x"){
answer=1/number;
}
else if (operator == "!"){
answer=factorial(number);
}
else if (operator == "sin()"){
answer=Math.sin(number);
}
else if (operator == "cos()"){
answer=Math.cos(number);
}
else if (operator == "tan()"){
answer=Math.tan(number);
}
else if (operator == "cot()"){
answer=Math.cos(number)/Math.sin(number);
}
else if (operator == "sec()"){
answer=1/Math.cos(number);
}
else if (operator == "csc()"){
answer=1/Math.sin(number);
}
else if (operator == "ln()"){
answer=Math.log(number);
}
else{
alert("This calculator does not currently support operators other than addition, subtraction, multiplication, division, squaring, cubing, exponentation, square roots, absolute values, reciprocals, factorials, the 6 trig functions and natural logarithms.")
}
}

function addition(number,number2) {
return parseInt(number) + parseInt(number2);
}

function factorial(number) {
if ((number == 0) || (number == 1))
return 1
else {
answer = (number * factorial(number-1) )
return answer;
}
}

function output() {
document.getElementById('display').value = answer;
}

</script></head>

<body>
<form id="form">
<input type="button" onclick="calculator()" value="Click to Start!" />
<input type="text" id="display" onmouseover="output()" />
</form>

</body>

</html>