I want to initialize my var from HTML to my JavaScript file but my form is not working.if i initialize by myself the function is working but when initialize from HTML not working.
i test any thing comes to my mind but it is not working.
function DDA() {
var x1, x2, y1, y2 ,m;
x1=document.getElementById('x1').value;
x2=document.getElementById('x2').value;
y1=document.getElementById('y1').value;
y2=document.getElementById('y2').value;
if(x1==null||x1==""||x2==null||x2==""||y1==null||y1==""||y2==null||y2==""){
console.log('enter number');
return false;
}
m = (y2 - y1) / (x2 - x1);
console.log(`(${x1},${y1})`);
if (m > 1) {
for (var i = y1 + 1; i <= y2; i++) {
x1 = (x1 + (1 / m));
console.log(`(${Math.round(x1)},${i})`);
}
} else {
for (var i = x1 + 1; i <= x2; i++) {
y1 = (y1 + m);
console.log(`(${i},${Math.round(y1)})`);
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="myform" onsubmit=" return (DDA())" action="index.html" method="POST">
<input type="text" id="x1" placeholder="x1"><br>
<input type="text" id="x2" placeholder="x2"><br>
<input type="text" id="y1" placeholder="y1"><br>
<input type="text" id="y2" placeholder="y1"><br>
<input type="submit" id="submitform" >
</form>
<script src="tamrin.js">
</script>
</body>
</html>
I think your code run perfectly If you fill all the text box it prints in the console if any filed not filled it show the message as "enter the number" because of your validation.
Related
I'm trying to simulate a race between a red and a blue dot. A dot wins if it equals or exceeds the value inputted into the text box for distance. As of now, when you click the "Take a step!" button, each dot's location/distance goes up by 1. What I'm not sure how to do is get that location/distance to go up by a random integer, in this case, a random integer from 1 to 3. How can I do that?
Here's what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dot Race</title>
<link href="dotrace.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function TakeAStep() {
var x, y, redcount, bluecount, distance;
x = Math.floor(Math.random() * 3) + 1;
y = Math.floor(Math.random() * 3) + 1;
redcount = document.getElementById("reddotspan").innerHTML++;
bluecount = document.getElementById("bluedotspan").innerHTML++;
distance = parseFloat(document.getElementById("DistanceBox").value);
if (redcount >= distance && bluecount >= distance) {
alert("They tied!");
} else if (redcount >= distance) {
alert("Red wins!");
} else if (bluecount >= distance) {
alert("Blue wins!");
}
}
</script>
</head>
<body>
<h2>Dot Race</h2>
<p>
Race distance: <input type="text" id="DistanceBox" placeholder="0" />
<br>
<span class="red">Red dot location:</span> <span id="reddotspan">0</span>
<br>
<span class="blue">Blue dot location:</span>
<span id="bluedotspan">0</span>
<hr>
<input type="button" value="Take a step!" onclick="TakeAStep();" />
</p>
<div id="OutputDiv"></div>
</body>
</html>
You are incrementing the value of redcount and bluecount but that has nothing to do with x and y.
I added these lines after x= and y=. Seems to fix the root cause.
document.getElementById("reddotspan").innerHTML=parseInt(document.getElementById("reddotspan").innerHTML)+x;
redcount = document.getElementById("reddotspan").innerHTML;
document.getElementById("bluedotspan").innerHTML=parseInt(document.getElementById("bluedotspan").innerHTML)+y;
bluecount = document.getElementById("bluedotspan").innerHTML;
distance = parseFloat(document.getElementById("DistanceBox").value);
<!doctype html>
<html lang="en">
<head>
<title>Dot Race</title>
<link href="dotrace.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript">
function TakeAStep()
{
var x, y, redcount, bluecount, distance;
x = Math.floor(Math.random() * 3) + 1 ;
y = Math.floor(Math.random() * 3) + 1;
current_red = +document.getElementById('reddotspan').innerText;
current_blue = +document.getElementById('bluedotspan').innerText;
redcount = current_red + x;
bluecount = current_blue + y;
document.getElementById('reddotspan').innerText = redcount;
document.getElementById('bluedotspan').innerText = bluecount;
distance = parseFloat(document.getElementById('DistanceBox').value);
if (redcount >= distance && bluecount >= distance) {
alert('They tied!');
} else if (redcount >= distance) {
alert('Red wins!');
} else if (bluecount >= distance) {
alert('Blue wins!')
}
}
</script>
</head>
<body>
<h2>Dot Race</h2>
<p>
Race distance:
<input type="text"
id="DistanceBox"
placeholder="0">
<br>
<span class="red">Red dot location:</span> <span
id="reddotspan">0</span>
<br>
<span class="blue">Blue dot location:</span>
<span id="bluedotspan">0</span>
<hr>
<input type="button"
value="Take a step!"
onclick="TakeAStep();">
</p>
<div id="OutputDiv"></div>
</body>
</html>
You were almost there. When you were using the ++ operator, you were modifying the current state of the innerHTML to just add one. Instead, you need to set it equal to the new value.
You should also use Number.parseInt so it parses it to a number explicitly. Otherwise, if you do "0" + 1, it will result in "01".
<html lang="en">
<head>
<title>Dot Race</title>
<link href="dotrace.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function TakeAStep() {
var x, y, newRedNumber, newBlueNumber, distance;
x = Math.ceil(Math.random() * 3);
y = Math.ceil(Math.random() * 3);
newRedNumber = Number.parseInt(document.getElementById('reddotspan').innerHTML) + x;
newBlueNumber = Number.parseInt(document.getElementById('bluedotspan').innerHTML) + y;
document.getElementById('reddotspan').innerHTML = newRedNumber;
document.getElementById('bluedotspan').innerHTML = newBlueNumber;
distance = parseFloat(document.getElementById('DistanceBox').value);
var outputText = "";
if (newRedNumber >= distance && newBlueNumber >= distance) {
outputText = 'They tied!';
} else if (newRedNumber >= distance) {
outputText = 'Red wins!';
} else if (newBlueNumber >= distance) {
outputText = 'Blue wins!';
}
document.getElementById('OutputDiv').innerHTML = outputText;
}
</script>
</head>
<body>
<h2>Dot Race</h2>
<p>
Race distance:
<input type="text" id="DistanceBox" placeholder="0">
<br>
<span class="red">Red dot location:</span> <span id="reddotspan">0</span>
<br>
<span class="blue">Blue dot location:</span>
<span id="bluedotspan">0</span>
<hr>
<input type="button" value="Take a step!" onclick="TakeAStep();" />
<div id="OutputDiv"></div>
</body>
</html>
You can use:
Math.round(Math.random()*3);
Math.random() returns a random number between 0 and 1.
Multiply by 3 to get 3 as highest number.
Round.
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>
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>
I don't have much experience with HTML or javascript coding and I am trying to make a simple calculation app. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
float:left;
padding:5px 150px;
}
#h1 {
float:left;
padding:5px 150px;
}
#v1 {
float:left;
padding:5px 150px;
}
#p2 {
padding:5px 150px;
}
#h2 {
padding:5px 150px;
}
#v2 {
padding:5px 150px;
}
</style>
</head>
<body>
<h1><center><b>Bernoulli's Energy Balance</b></center></h1>
<center><h2>P<sub>1</sub> + ρ*g*h<sub>1</sub> + ρ*(<sup>V<sub>1</sub><sup>2</sup></sup>⁄<sub>2</sub>) = P<sub>2</sub> + ρ*g*h<sub>2</sub> + ρ*(<sup>V<sub>2</sub><sup>2</sup></sup>⁄<sub>2</sub>) + ρ*F</h2></center>
<form name="boxes" action="">
<div id="p1" name="p1">
P<sub>1</sub>:<input type="text" name="P1" size=3></div>
<div id="p2" name="p2" align="right">
P<sub>2</sub>:<input type="text" name="P2" size=3><br></div><br>
<div id="h1" name="h1">
h<sub>1</sub>:<input type-"text" name="h1" size=3></div>
<div id="h2" name="h2" align="right">
h<sub>2</sub>:<input type-"text" name="h2" size=3></div><br>
<div id="v1" name="v1">
V<sub>1</sub>:<input type-"text" name="V1" size=3></div>
<div id="v2" name="v2" align="right">
V<sub>2</sub>:<input type-"text" name="V2" size=3></div><br>
<div id="rho" name="rho" align="center">
ρ:<input type="text" name="rho" size=3></div><br>
<div id="F" name="F" align="center">
F:<input type="text" name="F" size=3></div><br>
<div id="g" name="g" align="center">
g:<input type="text" name="g" size=3 value="9.8"></div><br>
<input type="button" onclick="calculate();" value="Calculate">
</form>
<script type="text/javascript" language="javascript" charset="utf-8">
function isEmpty(id) {
var text = document,getElementById(id).value;
if (!text.match(/\S/)){
return true;
}
else{
return false;
}
}
function calculate(){
var p1 = parseInt(document.getElementById("p1").value);
var p2 = parseInt(document.getElementById("p2").value);
var h1 = parseInt(document.getElementById("h1").value);
var h2 = parseInt(document.getElementById("h2").vaule);
var v1 = parseInt(document.getElementById("v1").value);
var v2 = parseInt(document.getElementById("v2").value);
var rho = parseInt(document.getElementById("rho").value);
var F = parseInt(document.getElementById("F").value);
var g = parseInt(document.getElementById("g").value);
var Lside = p1+(rho*g*h1)+(rho*((v1^2)/2));
var Rside = p2+(rho*g*h2)+(rho*((v2^2)/2))+(rho*F);
var ans = 0;
if (isEmpty(p1)){
ans = Rside-(rho*((v1^2)/2))-(rho*g*h1);
document.getElementById("p1").value = ans.toString();
}
else if (isEmpty(h1)){
ans = (Rside-(rho*((v1^2)/2))-p1)/(rho*g);
document.getElementById("h1").value = ans.toString();
}
else if (isEmpty(v1)){
ans = (Rside-p1-(rho*g*h1))/rho;
ans = ans*2;
ans = Math.sqrt(ans);
document.getElementById("v1").value = ans.toString();
}
else if (isEmpty(p2)){
ans = Lside-(rho*((v2^2)/2))-(rho*g*h2)-(rho*F);
document.getElementById("p2").value = ans.toString();
}
else if (isEmpty(h2)){
ans = (Lside-(rho*((v2^2)/2))-(rho*F)-p2)/(rho*g);
document.getElementById("h2").value = ans.toString();
}
}
</script>
</body>
</html>
I am trying to do the calculations and have the answer displayed in a text box. If that cannot be done I have also tried to display the answer in a tag but that did not work either.
Here is what the code looks like so far: http://jsfiddle.net/fCXMt/238/
It is supposed to find which text field is left blank and then do the calculation to find the value by using the other values which will all be given.
Quickly went through your code, the id's assigned are assigned to the div's and not the input values themselves.You are getting the wrong id's as from what i can see.
var p1 = parseInt(document.getElementById("p1").value);
should be
var p1 = parseInt(document.getElementById("P1").value);//notice the capital.
I also see that some divs that contain the input have id's but not the input fields themselves.
On line 76 you have a typo
var text = document,getElementById(id).value;
it should be document.getElementById(id).value;
Your code is full of errors. This is what it looks like after correcting the errors.
Demo on Fiddle
(For some reason, the first six inputs are unclickable on the fiddle. So, to get the focus on those inputs, click on the left top corner of the Result window and press the Tab key.)
HTML:
<div class="container">
<h1><center><b>Bernoulli's Energy Balance</b></center></h1>
<center>
<h2>P<sub>1</sub> + ρ*g*h<sub>1</sub> + ρ*(<sup>V<sub>1</sub><sup>2</sup></sup>⁄<sub>2</sub>) = P<sub>2</sub> + ρ*g*h<sub>2</sub> + ρ*(<sup>V<sub>2</sub><sup>2</sup></sup>⁄<sub>2</sub>) + ρ*F</h2>
</center>
<br />
<div class="data">
<form>
<div class="left">P<sub>1</sub>:
<input id="p1" type="text" size="3" />
</div>
<div class="right">P<sub>2</sub>:
<input id="p2" type="text" size="3" />
</div>
<div class="left">h<sub>1</sub>:
<input id="h1" type="text" size="3" />
</div>
<div class="right">h<sub>2</sub>:
<input id="h2" type="text" size="3" />
</div>
<div class="left">V<sub>1</sub>:
<input id="v1" type="text" size="3" />
</div>
<div class="right">V<sub>2</sub>:
<input id="v2" type="text" size="3" />
</div>
<div class="center">ρ:
<input id="rho" type="text" size="3" />
</div>
<br />
<div class="center">F:
<input id="F" type="text" size="3" />
</div>
<br />
<div class="center">g:
<input id="g" type="text" size="3" value="9.8" />
</div>
<br />
<input id="btn" type="button" value="Calculate" />
</form>
</div>
</div>
JavaScript:
function calculate() {
var p1 = parseFloat(document.getElementById("p1").value, 10);
var p2 = parseFloat(document.getElementById("p2").value, 10);
var h1 = parseFloat(document.getElementById("h1").value, 10);
var h2 = parseFloat(document.getElementById("h2").vaule, 10);
var v1 = parseFloat(document.getElementById("v1").value, 10);
var v2 = parseFloat(document.getElementById("v2").value, 10);
var rho = parseFloat(document.getElementById("rho").value, 10);
var F = parseFloat(document.getElementById("F").value, 10);
var g = parseFloat(document.getElementById("g").value, 10);
var Lside = p1 + (rho * g * h1) + (rho * ((v1 ^ 2) / 2));
var Rside = p2 + (rho * g * h2) + (rho * ((v2 ^ 2) / 2)) + (rho * F);
var ans;
if (!p1) {
ans = Rside - (rho * ((v1 ^ 2) / 2)) - (rho * g * h1);
document.getElementById("p1").value = Math.round(ans * 100) / 100;
} else if (!h1) {
ans = (Rside - (rho * ((v1 ^ 2) / 2)) - p1) / (rho * g);
document.getElementById("h1").value = Math.round(ans * 100) / 100;
} else if (!v1) {
ans = (Rside - p1 - (rho * g * h1)) / rho;
ans = ans * 2;
ans = Math.sqrt(ans);
document.getElementById("v1").value = Math.round(ans * 100) / 100;
} else if (!p2) {
ans = Lside - (rho * ((v2 ^ 2) / 2)) - (rho * g * h2) - (rho * F);
document.getElementById("p2").value = Math.round(ans * 100) / 100;
} else if (!h2) {
ans = (Lside - (rho * ((v2 ^ 2) / 2)) - (rho * F) - p2) / (rho * g);
document.getElementById('h2').value = Math.round(ans * 100) / 100;
}
}
var btn = document.getElementById('btn');
btn.onclick = calculate;
CSS:
.container {
text-align: center;
}
.data {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.left {
text-align: left;
}
.right {
position: relative;
top: -20px;
text-align: right;
}
Furthermore,I also realize that the values typed before clicking 'calculate' are disappear also.Until now I still cannot find the errors because I think my formula in calculating mortgage loan is correct.
HTML code:
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
<tr><td><input type="submit" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
</table>
</form>
</body>
</html>
JavaScript code:
function cal_mortgage()
{
var PR = form.principal.value; /*present value of the mortgage loan*/
var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = form.term.value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
form.monthly_pay.value = PAY;
}
This seems to work. But I haven't checked the mathematics:
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal" /></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest" /></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term" /></td></tr><p></p>
<tr><td><input type="button" value="calculate" onclick="cal_mortgage()" /></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay" /></td></tr>
</table>
</form>
<script>
function cal_mortgage()
{
var PR = document.getElementById("principal").value; /*present value of the mortgage loan*/
var IN = (document.getElementById("interest").value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = document.getElementById("term").value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
document.getElementById("monthly_pay").value = PAY;
}
</script>
</body>
</html>
In your html file, change <form> to <form id="Calculate"> and change button type from submit to button
In your javascript cal_mortgage() function, add this as your first line:
form = document.getElementById("Calculate")
Now it should work
NEW CODE:
function cal_mortgage()
{
form = document.getElementById('Calculate')
var PR = form.principal.value; /*present value of the mortgage loan*/
var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = form.term.value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
form.monthly_pay.value = PAY;
}
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form id="Calculate">
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
<tr><td><input type="button" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
</table>
</form>
</body>
</html>