'JavaScript code displaying in browser when form submitted, not the result of the script
I'm writing a basic calculator in JavaScript, and when I hit "=" on the html form it is returning the entire calculator.js, not the result. I'm not sure why this is happening, I want it to "alert" the answer variable. How can I get this to display correctly?
calculator.html
<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<link rel="stylesheet" type="text/css" href="calc.css"/>
<body>
<form>
<p>
<label for="x">First Number</label>
<input type="text" name="x" id="x" />
</p>
<p>
<label for="y">Second Number:</label>
<input type="text" name="y" id="y" />
</p>
<p>
<input type=radio name="Operation" value=Add id="0" /> <label for="0">Add</label>
<input type=radio name="Operation" value=Sub id="1" /> <label for="1">Sub</label>
<input type=radio name="Operation" value=Mult id="2" /> <label for="2">Mult</label>
<input type=radio name="Operation" value=Div id="3" /> <label for="3">Div</label>
</p>
<p>
<input type="submit" value="=" />
<input type="reset" />
</p>
</form>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
calculator.js
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
document.getElementById("x").addEventListener("change", Calculator, false);
document.getElementById("y").addEventListener("change", Calculator, false);
var answer = 0;
document.getElementById(0).addEventListener("click", Calculator, false);
document.getElementById(1).addEventListener("click", Calculator, false);
document.getElementById(2).addEventListener("click", Calculator, false);
document.getElementById(3).addEventListener("click", Calculator, false);
function add(){
answer = x+y;
}
function sub(){
answer = x-y;
}
function mult(){
answer = x*y;
}
function div(){
if(y=0){
alert "Cannot divide by zero"
}
else {answer = x/y}
}
function Calculator(){
if sign == 0{
add();
}
else if sign == 1{
sub();
}
else if sign == 2{
mult();
}
else if sign == 3{
div();
}
alert (answer);
}
Solution 1:[1]
This is happening because you've defined your form action as "calculator.js". You only need to include at the end of the HTML code, as you did.
There's no need to set a form or form method since you won't post/get it, only process it via javascript.
Also, the following lines will execute Calculator() whenever you change the value of x or y. I believe that is not what you intend...
document.getElementById("x").addEventListener("change", Calculator, false);
document.getElementById("y").addEventListener("change", Calculator, false);
On time: sign is undefined and alert should be alert(answer). I'll edit my answer with a suggestion for your javascript.
Suggestion: http://jsfiddle.net/xzkqvywf/
Solution 2:[2]
wow, there are loads of syntax and logic of errors in the javascript and HTML
some additional ones
in the div function you assign y with the value of zero
if(y=0){
You need to put id's in strings for calls to getElementById
document.getElementById("0")
At no point are you setting the value of "sign" that you use to compare
if (sign == 2)
You're submitted the form with a submit button
<form action="calculator.js" method="GET">
<input type="submit" value="=" />
so pressing the "=" button submits the form and issues a get request for the file "Calculator.js" which it then renders as the output in the browser.
Try removing the form and dealing with the button clicks
<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<link rel="stylesheet" type="text/css" href="calc.css"/>
<body>
<div>
<p>
<label for="x">First Number</label>
<input type="text" name="x" id="x" />
</p>
<p>
<label for="y">Second Number:</label>
<input type="text" name="y" id="y" />
</p>
<p>
<input type=radio name="Operation" value=Add id="0" /> <label for="0">Add</label>
<input type=radio name="Operation" value=Sub id="1" /> <label for="1">Sub</label>
<input type=radio name="Operation" value=Mult id="2" /> <label for="2">Mult</label>
<input type=radio name="Operation" value=Div id="3" /> <label for="3">Div</label>
</p>
<p>
<button id="go">=</button>
<button id="reset" />reset</button>
</p>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
and then rewrite the code like this.
(function() {
var x,
y,
sign=0,
answer=0;
document.getElementById("0").addEventListener("click", setSign, false);
document.getElementById("1").addEventListener("click", setSign, false);
document.getElementById("2").addEventListener("click", setSign, false);
document.getElementById("3").addEventListener("click", setSign, false);
document.getElementById("reset").addEventListener("click", reset, false);
document.getElementById("go").addEventListener("click", calc, false);
function reset(e) {
sign = 0;
answer = 0;
}
function setSign(e) {
sign = e.target.id;
}
function add(){
answer = x+y;
}
function sub(){
answer = x-y;
}
function mult(){
answer = x*y;
}
function div(){
if(y==0){
alert("Cannot divide by zero");
return;
}
answer = x/y;
}
function calc(){
x = parseFloat(document.getElementById("x").value);
y = parseFloat(document.getElementById("y").value);
if (sign == 1){
sub();
}
else if (sign == 2){
mult();
}
else if (sign == 3){
div();
}
else {
add();
}
alert(answer);
}
})();
Solution 3:[3]
Your javascript code is not correct-
1- Put alert as alert(answer).
2- When you call a function just put name in javascript like
if (sign = 0){
add();
}
function add is already defined avove
Also if and else if conditions are supposed to be in a bracket like
if(sign==0){ }
4- Don't assign values inside if conditions. '=' is used to assign value to a varialbe ,'==' and '===' are used to compare
Solution 4:[4]
A HTML form is meant to be submitted to a server(ex: jsp,asp,php pages etc) not to a Javascript file.
If you don't have any server side work to do you can remove the <form> tag and handle the button click event through Javascript. And also the code needs to be modified. Move the <link> tag to <head> section of the page. Don't use the same callback function Calculator() as "click" event handler for every button. Have different callbacks for each of the button (Add, Subtract, Multiply, Divide) "click". And the code
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
has to be moved inside Calculator() function so that you whenever you click "=" present values of input fields with ids x and y will be fetched.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Code Uniquely |
| Solution 3 | RahulB |
| Solution 4 | Siva Krishna Gontla |