I have been attempting to figure out how to create a distance calculator. I think the formula is correct, but my issue is that my variables will not run through the formula or even display in my output.
<!doctype html>
<!-- distance.html Mason Boroff -->
<!-- =================================================== -->
<html>
<head>
<title> Distance Calculator </title>
<script type="text/javascript">
function ShowDistance()
{
var x1, x2, y1, y2;
x1=parsefloat(document.getElementById('xOne').value);
x2=parsefloat(document.getElementById('xTwo').value);
y1=parsefloat(document.getElementById('yOne').value);
y2=parsefloat(document.getElementById('yTwo').value);
var distance = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-
y2), 2) );
return distance;
document.getElementById('outPut').innerHTML=
'The distance bewtween (' + x1 + ',' + y1 + ') and ('
+ x2 + ',' + y2 + ') is '+ distance +;
}
</script>
</head>
<body>
<h2>Distance Calculator</h2>
<p>
Coordinate 1: (<input type="text" id="xOne" size=12 value=''> ,
<input type="text" id="yOne" size=12 value=''>)
<br>
Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> ,
<input type="text" id="yTwo" size=12 value=''>)
<br>
<br>
<input type="button" onclick="ShowDistance()" value="Calculate
Distance";>
</p>
<hr>
<div id="outPut"> </div>
</body>
Posting the corrected code.
There is always a good way to debug your code when writing front end code. The browser. Learn how to use browser console.
<!doctype html>
<!-- distance.html Mason Boroff -->
<!-- =================================================== -->
<html>
<head>
<title> Distance Calculator </title>
<script type="text/javascript">
function ShowDistance()
{
var x1, x2, y1, y2;
x1=parseFloat(document.getElementById('xOne').value);
x2=parseFloat(document.getElementById('xTwo').value);
y1=parseFloat(document.getElementById('yOne').value);
y2=parseFloat(document.getElementById('yTwo').value);
var distance = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-
y2), 2) );
document.getElementById('outPut').innerHTML=
'The distance bewtween (' + x1 + ',' + y1 + ') and ('
+ x2 + ',' + y2 + ') is '+ distance ;
return distance;
}
</script>
</head>
<body>
<h2>Distance Calculator</h2>
<p>
Coordinate 1: (<input type="text" id="xOne" size=12 value=''> ,
<input type="text" id="yOne" size=12 value=''>)
<br>
Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> ,
<input type="text" id="yTwo" size=12 value=''>)
<br>
<br>
<input type="button" onclick="ShowDistance()" value="Calculate
Distance">
</p>
<hr>
<div id="outPut"> </div>
</body>
How I debugged it?
USe F12...then I looked into the console to check that there is an error in the line having extra +.
So I changed it.
Then I saw the complaign about parseFloat. Then I checked refernce to find out there is an method called parseFloat not parsefloat`.
Then I saw no outpout and no error. WHich made me check code again which revealed that there is return statement before you assign the result to innerHTML...
That's how I debugged it.
You should learn :-
How to use chrome debugger.
Checking the manual when you get stuck or in doubt about built in functions.
Learn a bit more javascript and basi control flow of programs.
There are several typos/syntax related issues in the code as well as a return in the function that prevents the printing line to be reached.
You have parsefloat calling while the function name is parseFloat. There also is a concat operator that does not have anything to follow distance +.
Here is an update snippet:
function ShowDistance()
{
var x1, x2, y1, y2;
x1=parseFloat(document.getElementById('xOne').value);
x2=parseFloat(document.getElementById('xTwo').value);
y1=parseFloat(document.getElementById('yOne').value);
y2=parseFloat(document.getElementById('yTwo').value);
var distance = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-
y2), 2) );
document.getElementById('outPut').innerHTML= 'The distance bewtween (' + x1 + ',' + y1 + ') and ('+ x2 + ',' + y2 + ') is '+ distance;
}
<!doctype html>
<!-- distance.html Mason Boroff -->
<!-- =================================================== -->
<html>
<head>
<title> Distance Calculator </title>
</head>
<body>
<h2>Distance Calculator</h2>
<p>
Coordinate 1: (<input type="text" id="xOne" size=12 value=''> ,
<input type="text" id="yOne" size=12 value=''>)
<br>
Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> ,
<input type="text" id="yTwo" size=12 value=''>)
<br>
<br>
<input type="button" onclick="ShowDistance()" value="Calculate
Distance">
</p>
<hr>
<div id="outPut"> </div>
</body>
Run your code before posting a question.
function showDistance() {
var x1 = (parseInt(document.getElementById('xOne').value)).toFixed(4);
var x2 = (parseInt(document.getElementById('xTwo').value)).toFixed(4);
var y1 = (parseInt(document.getElementById('yOne').value)).toFixed(4);
var y2 = (parseInt(document.getElementById('yTwo').value)).toFixed(4);
var distance = Math.sqrt( Math.pow((x1-x2), 2) +
Math.pow((y1-y2), 2) );
document.getElementById('outPut')
.innerHTML= 'The distance bewtween (' +
x1 + ',' + y1 + ') and (' +
x2 + ',' + y2 + ') is '+ distance;
return distance;
}
<h2>Distance Calculator</h2>
<p>
Coordinate 1: (<input type="text" id="xOne" size=12 value=''> ,
<input type="text" id="yOne" size=12 value=''>)
<br>
Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> ,
<input type="text" id="yTwo" size=12 value=''>)
<br>
<input type="button" onclick="showDistance()" value="Calculate
Distance";>
</p>
<hr>
<div id="outPut"> </div>
Related
<!DOCTYPE html>
<html>
<title> Riven Calculator </title>
<style type="text/css">
body {
background-image: url("BOOP.jpg");
}
</style>
<body style="background-color: #a6a6a6;">
<br>
<br>
<br>
<br>
<br>
<h1 align="center"> Riven Damage Calculator </h1>
<script type="text/javascript">
var level = document.getElementById('RIVEN_LEVEL');
var rivenQrank = document.getElementById('RIVEN_Q');
var rivenWrank = document.getElementById('RIVEN_W');
var rivenErank = document.getElementById('RIVEN_E');
var rivenRrank = document.getElementById('RIVEN_R');
var bonusAD = document.getElementById('RIVEN_AD');
var rivenHP = 558.48 + (86 * level);
var rivenAD = 56.04 + (3 * level) + bonusAD;
var rivenARM = 24.376 + (3.2 * level) ;
var rivenMR = 32.1 + (1.25 * level);
var rivenQDMG = 10 + (20 * rivenQrank) + (rivenAD * (.4 + .05 * rivenQrank));
var rivenWDMG = 50 + (30 * rivenWrank) + (rivenAD - 56.04);
var rivenEDMG = 90 + (30 * rivenErank) + (rivenAD - 56.04);
var rivenRDMG = 100 + (50 * rivenRrank) + (rivenAD - 56.04) * .6;
function myBoop() {
console.log(rivenQDMG);
console.log(rivenWDMG);
console.log(rivenEDMG);
console.log(rivenRDMG);
}
</script>
<center>
<p align="center"> Input your level: </p> <input type="text" id="RIVEN_LEVEL"> <br>
<p align="center"> Input your Q rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_Q"> <br>
<p align="center"> Input your W rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_W"> <br>
<p align="center"> Input your E rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_E"> <br>
<p align="center"> Input your R rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_R"> <br>
<p align="center"> Input your bonus AD: </p> <input type="text" id="RIVEN_AD"> <br>
<br>
<br>
<button onclick="myBoop()"> Calculate </button>
</center>
</body>
</html>
The point of it is to calculate the damage each ability does at a given time in the game, but every time I try to calculate with it, it says that Q does 32.416 damage, that W does 50 damage, that E shields 90 damage, and R does 100 damage. I feel like it has something to do with the getElementById parts of the code, but I'm not entirely sure.
You get the element with getElementById() and need to get its value property
You need to get the values when the function executes so move the code in the myBoop() function
function myBoop() {
var level = document.getElementById('RIVEN_LEVEL').value;
var rivenQrank = document.getElementById('RIVEN_Q').value;
var rivenWrank = document.getElementById('RIVEN_W').value;
var rivenErank = document.getElementById('RIVEN_E').value;
var rivenRrank = document.getElementById('RIVEN_R'.value);
var bonusAD = document.getElementById('RIVEN_AD').value;
var rivenHP = 558.48 + (86 * level);
var rivenAD = 56.04 + (3 * level) + bonusAD;
var rivenARM = 24.376 + (3.2 * level) ;
var rivenMR = 32.1 + (1.25 * level);
var rivenQDMG = 10 + (20 * rivenQrank) + (rivenAD * (.4 + .05 * rivenQrank));
var rivenWDMG = 50 + (30 * rivenWrank) + (rivenAD - 56.04);
var rivenEDMG = 90 + (30 * rivenErank) + (rivenAD - 56.04);
var rivenRDMG = 100 + (50 * rivenRrank) + (rivenAD - 56.04) * .6;
console.log(rivenQDMG);
console.log(rivenWDMG);
console.log(rivenEDMG);
console.log(rivenRDMG);
}
<!DOCTYPE html>
<html>
<title> Riven Calculator </title>
<style type="text/css">
body {
background-image: url("BOOP.jpg");
}
</style>
<body style="background-color: #a6a6a6;">
<br>
<br>
<br>
<br>
<br>
<h1 align="center"> Riven Damage Calculator </h1>
<center>
<p align="center"> Input your level: </p> <input type="text" id="RIVEN_LEVEL"> <br>
<p align="center"> Input your Q rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_Q"> <br>
<p align="center"> Input your W rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_W"> <br>
<p align="center"> Input your E rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_E"> <br>
<p align="center"> Input your R rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_R"> <br>
<p align="center"> Input your bonus AD: </p> <input type="text" id="RIVEN_AD"> <br>
<br>
<br>
<button onclick="myBoop()"> Calculate </button>
</center>
</body>
</html>
P.S. Riven OP
Well I haven't read the JS code through thoroughly so I don't know how the calculation is built in the first place (especially because I don't know which game you are refferring to).
But when you use getElementById(), and you want the value the user entered in the text field for example, you have to append .value() at the end of it (f.e. document.getElementById("RIVEN_AD").value();), because otherwise you will just get back the object and not it's value.
Declare all the variable inside the function.And you need to add .value of the each element value call.And Add parseFloat to parse the string to number
function myBoop() {
var level = parseFloat(document.getElementById('RIVEN_LEVEL').value);
var rivenQrank = parseFloat(document.getElementById('RIVEN_Q').value);
var rivenWrank = parseFloat(document.getElementById('RIVEN_W').value);
var rivenErank = parseFloat(document.getElementById('RIVEN_E').value);
var rivenRrank = parseFloat(document.getElementById('RIVEN_R').value);
var bonusAD = parseFloat(document.getElementById('RIVEN_AD').value);
if(!level && !rivenQrank && !rivenWrank && !rivenErank && !rivenRrank && !bonusAD){ // for validation to all boxes
console.log('Fill the all boxes');
return false;
}
var rivenHP = 558.48 + (86 * level);
var rivenAD = 56.04 + (3 * level) + bonusAD;
var rivenARM = 24.376 + (3.2 * level);
var rivenMR = 32.1 + (1.25 * level);
var rivenQDMG = 10 + (20 * rivenQrank) + (rivenAD * (.4 + .05 * rivenQrank));
var rivenWDMG = 50 + (30 * rivenWrank) + (rivenAD - 56.04);
var rivenEDMG = 90 + (30 * rivenErank) + (rivenAD - 56.04);
var rivenRDMG = 100 + (50 * rivenRrank) + (rivenAD - 56.04) * .6;
console.log(rivenQDMG);
console.log(rivenWDMG);
console.log(rivenEDMG);
console.log(rivenRDMG);
}
<body style="background-color: #a6a6a6;">
<br>
<br>
<br>
<br>
<br>
<h1 align="center"> Riven Damage Calculator </h1>
<center>
<p align="center"> Input your level: </p> <input type="text" id="RIVEN_LEVEL"> <br>
<p align="center"> Input your Q rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_Q"> <br>
<p align="center"> Input your W rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_W"> <br>
<p align="center"> Input your E rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_E"> <br>
<p align="center"> Input your R rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_R"> <br>
<p align="center"> Input your bonus AD: </p> <input type="text" id="RIVEN_AD"> <br>
<br>
<br>
<button onclick="myBoop()"> Calculate </button>
</center>
#StuntHacks is correct about taking the values from an input. Your script is also placed in the wrong order. Your script should go last just before the body because you are a calling getElementById() on something that is not referenced yet.
<div id="riven"></div>
<script>
document.getElementById("riven");
</script>
I'm trying to use the distance formula to find the difference between two castle on a game. The game stores the castle coordinates in the following format
"l+k://coordinates?16321,16520&146" the coordinates of this castle would be 16321 & 16520. I have written a function to extract this information from two castle links and then use the distance formula to return the answer. However for some reason when this function is called in the website it does not return the expected result. Does anyone know why this might be happening. Please find my code below. I have also attached a JSFiddle.
https://jsfiddle.net/ajdxetod/
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Lords & Knights - Distance Calculator</title>
<script type="text/javascript" src="distanceScript.js"></script>
</head>
<body>
<h1 class="heading">Distance Calculator</h1>
<div>
<fieldset>
<legend>Castle Link One</legend>
<input type="text" id="castle_one">
</fieldset>
</div>
<div>
<fieldset>
<legend>Castle Link Two</legend>
<input type="text" id="castle_two">
</fieldset>
</div>
<div class="map_of_areadiv">
<fieldset>
<legend>Is Map Of Area Researched</legend>
<input type="checkbox" id="moa_checkbox" checked="true"><label for="moa_checkbox">Is "Map Of Area Researched in the Libary?</label>
</fieldset>
</div>
<div class="calculate_button">
<button id="calculate" onclick="distanceCastles()">Calculate Distance</button>
</div>
<div class="distance_output">
<fieldset id="castle_distance">
<legend>Distance (in fields)</legend>
<input type="text" id="output" placeholder="Click the Calculate Distance Button">
</fieldset>
<textarea id="troop_times"></textarea>
</div>
</body>
distanceScript.js
var castleone;
var castletwo;
var x1;
var x2;
var y1;
var y2;
var distance = 0;
function distanceCastles() {
castleone = document.getElementById("castle_one") ;
castletwo = document.getElementById("castle_two") ;
if (typeof castleone === "string" && castleone.length === 33) {
x1 = castleone.substring(18, 23);
y1 = castleone.substring(24, 29);
x2 = castletwo.substring(18, 23);
y2 = castletwo.substring(24, 29);
distance = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
document.getElementById("output").innerHTML = distance;
}
else if (typeof castleone !== "string" || castleone.length !== 33) {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
}
else {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
}
}
You are declaring a variable
var distance = 0;
And then you create a function with the same name
function distance () {
// code...
}
and you wonder why you get an error. Rename either.
Some issues
As what first answer stated the distance was declared as a variable first
You are comparing an html object with a string..You don't need to do this (See how I attempted it)
You are trying to insert out message without using using the property innerHTML OR textContent..
You can get the value of each input distance using .value property of input box
See snippet below
<!DOCTYPE html>
<html>
<head>
<title>Lords & Knights - Distance Calculator</title>
<script type="text/javascript" src="distanceScript.js"></script>
</head>
<body>
<script>
var castleone;
var castletwo;
var x1;
var x2;
var y1;
var y2;
function distance() {
castleone = document.getElementById("castle_one");
castletwo = document.getElementById("castle_two");
if (castleone.value.length === 33) {
x1 = castleone.value.substring(18, 23);
y1 = castleone.value.substring(24, 29);
x2 = castletwo.value.substring(18, 23);
y2 = castletwo.value.substring(24, 29);
distance = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
console.log(distance);
document.getElementById("output").value = distance;
} else if (castleone.value.length !== 33) {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
} else {
document.getElementById("troop_times").innerHTML = "Error: You have not entered valid castle links";
}
}
</script>
<h1 class="heading">Distance Calculator</h1>
<div>
<fieldset>
<legend>Castle Link One</legend>
<input type="text" id="castle_one">
</fieldset>
</div>
<div>
<fieldset>
<legend>Castle Link Two</legend>
<input type="text" id="castle_two">
</fieldset>
</div>
<div class="map_of_areadiv">
<fieldset>
<legend>Is Map Of Area Researched</legend>
<input type="checkbox" id="moa_checkbox" checked="true">
<label for="moa_checkbox">Is "Map Of Area Researched in the Libary?</label>
</fieldset>
</div>
<div class="calculate_button">
<button id="calculate" onclick="distance()">Calculate Distance</button>
</div>
<div class="distance_output">
<fieldset id="castle_distance">
<legend>Distance (in fields)</legend>
<input type="text" id="output" placehodler="Click the Calculate Distance Button">
</fieldset>
<textarea id="troop_times"></textarea>
</div>
</body>
</html>
Updated code. calculate() still not working. The monthly payment amount is ultimately not being passed to the "total" id box. Does anyone see what the underlying problem is here? My syntax seems to be correct, I believe there may be a problem with my specification of where each variable is applied in the code.
I am having problems getting the function calculate() to pass the correct result in "total." Any possible solutions? The action of clicking the calculate button should display the total, but is displaying nothing at all, as if the button does not activate the calculate function at all.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr>
<form name id="Main">
<input type="number" id="price" placeholder="Price of the Car"/>
<br>
<br>
<input type="number" id="DP" placeholder="Down Payment"/>
<br>
<br>
<input type="number" id="R" placeholder="Annual % Rate"/>
<br>
<br>
<input type="number" id="N" placeholder="# of Years Loaned"/>
<br>
<br>
<input type="button" id="calculate" value="Calculate" onclick="javascript:calculate();"/>
<br>
<br>
<input type="number" id="total" placeholder="Total Cost..." readonly=""/>
<br>
<br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</html>
Use Math.pow() function instead. The ^ operator is not for mathematical power operations (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow).
Also, It's result.value = m, not the other way around :)
Also 2: R and M seem undefined to me, you have to initialize those variables with something, like you did with P and D.
Also 3: use chrome dev tools or anything like that. It will make your life much easier. Remember, javascript doesn't mean "no IDE" :D
Unfortunately, your original code will never work, as it has too many errors.
Here is the corrected fiddle for you, please, have a look:
http://jsfiddle.net/q330fqw8/
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;
}
I removed id="calculate" in HTML, because of this: Why JS function name conflicts with element ID?
In Javascript, the 4 variables P,D,R,N should be set properly. Finally, this m.value = result; -> result.value = m;
but I guess, you've already corrected some errors in the question. I worked with your original code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr/>
<form id="Main">
<input type="number" id="price" placeholder="Price of the Car" />
<br />
<br/>
<input type="number" id="DP" placeholder="Down Payment" />
<br/>
<br/>
<input type="number" id="R" placeholder="Annual % Rate" />
<br/>
<br/>
<input type="number" id="N" placeholder="# of Years Loaned" />
<br/>
<br/>
<input type="button" value="Calculate Monthly Payment" onclick="calculate();" />
<br/>
<br/>
Total Monthly Payment:<input type="number" id="total" placeholder="Total Cost..." readonly="" />
<br/>
<br/>
<input type="reset" value="Reset" />
</form>
<hr/>
</div>
I'm trying to get the data from a form and use the values for a final result.
The problem is (at least what it looks like when I'm debugging) is no values are being retried and stored in the vars I've created.
Here's the form:
<form>
<p>
<label for="numDigits">Number of Digits: </label>
<input type="text" id="numDigits" name="numDigits" />
</p>
<p>
<label for="num1">First Number: </label>
<input type="text" id="num1" name="num1" />
</p>
<p>
<label for="num2">Second Number: </label>
<input type="text" id="num2" name="num2" />
</p>
<p>
<label for="num3">Third Number: </label>
<input type="text" id="num3" name="num3" />
</p>
<p>
<input type="button" name="calc" id="calc" value="Calculate" />
</p>
<p id="result">Result will be displayed here when the button is pressed.</p>
</form>
and the JQuery script
$("#calc").on('click', function(){
var a = Number($("#numDigits").val());
var x = Number($("#num1").val());
var y = Number($("#num2").val());
var z = Number($("#num3").val());
var total = a * 3 + x + ((a + x - y) % a) + ((a + z - y) % a);
$("#result").html("<p class='id'>" + total + "</p>");
});
Thanks in advance for the help!
Edit: I updated the code to the working version.
Its seems to work well: fiddle
But note that, if you want to manipulate the input as numbers, you should write
var a = Number($("#numDigits").val());
var x = Number($("#num1").val());
var y = Number($("#num2").val());
var z = Number($("#num3").val());
Replace the replaceWith() with html(). I have The DEMO working:
$("#calc").click(function(){
var a = $("#numDigits").val();
var x = $("#num1").val();
var y = $("#num2").val();
var z = $("#num3").val();
var total = a * 3 + x;
total += ((y - x) % a);
total += ((y - z) % a);
$("#result").html(total);
});
simple numerical code to compute the hypotenuse with the numeric value, i dont know how to decpiher the hypotenuse code in Javascript language" hypo = the square_root of ( sidea squared plus sideb squared)", when i go to my webpage it just shows up blank...what am i missing please inform me on what it was thanks
<html>
<head>
<title> Quadratic</title>
<script type="text/javascript">
function Calculate() {
var a = document.getElementById("aBox").value;
var b = document.getElementById("bBox").value;
var c = document.getElementById("cBox").value;
var x = document.getElementById("xBox").value;
var y = 0;
document.getElementById('outputDiv').innerHTML= 'result y = : 'y = ax2 + bx + c;">
}
</head>
<body>
<h2>Quadratic</h2>
<p>
a: <input type="text" id="aBox" value="2">
<br>
b: <input type="text" id="bBox" value="3">
<br>
c: <input type="text" id="cBox" value="4">
<br>
x: <input type="text" id="xBox" value="5">
<br>
result y = : <input type="text" id="yBox" value="0">
</p>
<div id="outputDiv">
<input type="button" value="Calculate quadratic" onclick="Calculate();">
</div>
<hr>
</script>
</body>
</html>
You need to close the script tag in the right place
}
</script>
</head>
<body>
then your page will at least display
then you need to fix this
.innerHTML= 'result y = : 'y = ax2 + bx + c;">
Try this fiddle. http://jsfiddle.net/harendra/CpBZu/
This fixes your calculate function to calculate hypotenuse of square. You can do same for other squares as well.
function Calculate() {
var a = parseInt(document.getElementById("aBox").value);
var b = parseInt(document.getElementById("bBox").value);
var c = parseInt(document.getElementById("cBox").value);
var x = parseInt(document.getElementById("xBox").value);
var y = Math.sqrt(a*a+a*a);
document.getElementById('yBox').value=y
//document.getElementById('outputDiv').innerHTML= 'result y = : 'y = ax2 + bx + c";
}