Need help to some JAVASCRIPT!

mort982a · 04-05-2012, 02:29 PM

Hello CodingForum!

Im seeking some help to do some JavaScript

I got this code: http://f.cl.ly/items/1f0f3p1v1h1q1U4...20løsning.html

And then my question is: How can i make a triangle that illustrates the data which the program calculated using javascript - instead of using a .gif file to illustrate the triangle?

vwphillips · 04-05-2012, 02:58 PM

http://www.vicsjavascripts.org.uk/Tr.../Triangles.htm

mort982a · 04-05-2012, 03:28 PM

Quote:

Originally Posted by vwphillips

http://www.vicsjavascripts.org.uk/Tr.../Triangles.htm

Im pretty noob - can u highlight the place were the triangle is made?

Philip M · 04-05-2012, 06:59 PM

Quote:

Originally Posted by mort982a

Im pretty noob - can u highlight the place were the triangle is made?

In that case I fear that vic's script is a mite hard for you.

Have a look at

https://developer.mozilla.org/en/Can...Drawing_shapes

The canvas element is a feature of HTML5 which is not supported by all browsers.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

xelawho · 04-05-2012, 07:43 PM

I was looking at this page

and figured you could do this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>

<style type="text/css">
		#tri {
			width:0px; 
			height:0px; 
			border-left:50px solid transparent;  /* left arrow slant */
			border-right:0px solid transparent; /* right arrow slant */
			border-bottom:50px solid #2f2f2f; /* bottom, add background color here */
		}
		
	</style>
</head>
<body>
<div id="tri"></div>
		
height:<input id="height" type="text" value="50"/>		
width: <input id="width" type="text" value="50"/>
<input type="button" value="calculate" onclick="calcTri()"/>	
	
<script type="text/javascript">
function calcTri(){
var thetri=document.getElementById("tri");
var ht=document.getElementById("height").value;
var wd=document.getElementById("width").value;
thetri.style.borderBottom=ht+"px solid #2f2f2f"
thetri.style.borderLeft=wd+"px solid transparent"
}
</script>		
</body>
</html>

which seems to be a better cross-browser solution (works in IE, FF and Chrome). maybe you can modify it

mort982a · 04-05-2012, 09:09 PM

I can't figure how to do it.
Can some of you try to make a code there will work including my code.

xelawho · 04-06-2012, 01:21 AM

what's the confusion?

The only difference between my code and yours is that mine starts with the height and width as known and your starts with the height and hypoteneuse as known.

I never studied any trigonometry (that I'm aware of), so anybody feel free to jump in here, but being that c squared =a squared plus b squared, if you have a and c then finding b is just the square root of c squared minus b squared, isn't it?

And being that this is a homework assignment, that's probably all the help you need, no?

in the meantime, I pimped out my code a little - like I say, I have no idea if the numbers are right, but they seem ok to me...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>

<style type="text/css">
		#tri {
			width:0px; 
			height:0px; 
			border-left:150px solid transparent;  /* left arrow slant */
			border-right:0px solid transparent; /* right arrow slant */
			border-bottom:150px solid #2f2f2f; /* bottom, add background color here */
		}
		#A {
		position:absolute; 
		top:150px;
		}
		#a {
		position:absolute; 
		top:75px;
		}
		#b {
		position:relative; 
		left:75px;
		background-color:white;
		top:-40px;
		}
		#c {
		position:absolute; 
		top:88px; 
		left:58px;
		background-color:white;
		}
		#B {
		white-space:nowrap;
		}
	</style>
</head>
<body>
<div id="tri">
<div id="c">c: 212.13</div>
<div id="A">A: 90 deg</div>
<div id="a">a: 150</div>
<div id="B">B: 45 deg</div>

</div>
<div id="C">C: 45 deg</div>
<span id="b">b: 150</span>
<br>
<br>		
height:<input id="height" type="text" value="150"/>		
width: <input id="width" type="text" value="150"/>
<input type="button" value="calculate" onclick="calcTri()"/>	
	
<script type="text/javascript">
function calcTri(){
var thetri=document.getElementById("tri");
var ht=document.getElementById("height").value;
var wd=document.getElementById("width").value;
thetri.style.borderBottom=ht+"px solid #2f2f2f"
thetri.style.borderLeft=wd+"px solid transparent"
document.getElementById("A").style.top=ht+"px"
document.getElementById("a").style.top=ht/2+"px"
document.getElementById("c").style.top=(ht/2)+15+"px"
document.getElementById("b").style.left=wd/2+"px"
document.getElementById("c").style.left=(wd/2)-15+"px"
document.getElementById("a").innerHTML="a: "+ht; 
document.getElementById("b").innerHTML="b: "+wd;
var hyp=Math.sqrt((ht*ht)+(wd*wd))
document.getElementById("c").innerHTML="c: "+hyp.toFixed(2)
document.getElementById("C").innerHTML="C: "+Math.round(Math.atan(ht/wd)*180/Math.PI*100)/100+" deg";
document.getElementById("B").innerHTML="B: "+Math.round(Math.asin(wd/hyp)*180/Math.PI*100)/100+" deg";
}
</script>		
</body>
</html>

felgall · 04-06-2012, 01:44 AM

Quote:

Originally Posted by xelawho

I never studied any trigonometry (that I'm aware of), so anybody feel free to jump in here, but being that c squared =a squared plus b squared, if you have a and c then finding b is just the square root of c squared minus b squared, isn't it?

That's correct provided that it is a triangle with one 90 degree angle.

For generic triangles you'd need to use sine cosine or tan depending on which two you have. If I remember correctly sine is opposite over hypotenuse, cosine is adjacent over hypotenuse and tan is opposite over adjacent.

Old Pedant · 04-06-2012, 01:56 AM

If you only have two sides and you don't know that the triangle is a right triangle, the problem is not solvable.

You can solve for the unknown sides and angles if you know any of the following, where S means side and A means angle and the ordering implies the postioning:
SAS
SSA
SSS
ASA

In the case of a right triangle, you have either SAS or SSA, depending on which two sides you have, so it is solvable.

If you think of solving the problem using a ruler, protractor, and compass, it becomes easier to see why you need one of those combinations.

vwphillips · 04-06-2012, 09:46 AM

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script>
function res(){
	a1 = parseFloat(document.getElementById("a1").value);
	c1 = parseFloat(document.getElementById("c1").value);
	b1 = Math.round(Math.sqrt((c1*c1)-(a1*a1))*100)/100;
	A1 = Math.round((Math.asin(a1/c1))*100*57.29577951308235)/100;
	B1 = Math.round((90-A1)*10000)/10000;

	if(a1 == 0 || c1 == 0) {
		alert("Du har ikke indtastet en værdi!");
	}
    else if (isNaN(a1) || isNaN(c1)) {
		alert("Du skal indtaste et tal!");
	}
    else if ( a1 >= c1)  {
		alert("Det er ikke muligt at a er mindre end c");
	}
    else  {
		document.getElementById("b1").value = b1;
		document.getElementById("A11").value = A1;
		document.getElementById("B11").value = B1 ;
        Draw(a1,c1)

	}
}
</script>
<div align="center">
	<table border="0" summary="">
		<tr>
        <div id="canvas" style="position:relative;width:250px;height:250px;border:solid black 1px;" ></div>

		</tr>


	</table>

<div align="center">
	<font size="4"><br />Indtast værdierne a og c, klik på Udregn
	<table width="300" height="0" border="0">
		<tr>
			<td>
				<form method="post" action="" name="veardi">
<table id="cal1" width="100%" border="0">
	<tr align="middel" valign="middel">
    			<b><font>a</font></b> =
				<input type="text" id="a1" name="a1" value="40" />
				<br />
				<b><font>c</font></b> =
				<input type="text" id="c1" name="c1" value="90">
				<br />
                <br />
                <b><font>C</font></b> =
				<input type="text" id="C1" name="C1" value="90" readonly="true">
				<br />
                <b><font>b</font></b> =
				<input type="text" id="b1" name="b1" value="0" readonly="true">
				<br />
                <b><font>A</font></b> =
				<input type="text" id="A11" name="A1" value="0" readonly="true">
				<br />
                <b><font>B</font></b> =
				<input type="text" id="B11" name="B1" value="0" readonly="true">
             </td>
       </tr>

	</font>
</div>
</form>
<tr align="center" valign="top">
<td width="0">
<div align="left">
	<input type="button" name="udregn" value="Udregn"onClick="res()">
</div>
</td>
<td width="1" height="65">
<div align="center"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

<table>
	<tr>
		<td><input type="button" value="Ny udregning" onClick="window.location.reload()"></td>
	</tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/

function Draw(a,c){
  var obj=document.getElementById('canvas'),w=obj.offsetWidth-40,b = Math.round(Math.sqrt((c*c)-(a*a))*100)/100,clone=document.createElement('DIV'),r=a/b,b1,a1,s1,t;
  b=Math.max(Math.min(b,w),w);
  a=b*r
  while (a>obj.offsetHeight-40){
   a--;
  }
  b=a/r;
  obj.innerHTML='';
  clone.style.position='absolute';
  clone.style.width='1px';
  clone.style.height='1px';
  clone.style.color='black';
  clone.style.backgroundColor='black';
  clone.style.fontSize='14px';
  b1=clone.cloneNode(true)
  b1.style.width=b+'px';
  b1.style.top=obj.offsetHeight-20+'px';
  b1.style.left=(obj.offsetWidth-b)/2+'px';
  obj.appendChild(b1);

  a1=clone.cloneNode(true)
  a1.style.height=a+'px';
  a1.style.left=(b1.offsetLeft+b)+'px';
  a1.style.top=b1.offsetTop-a+'px';
  obj.appendChild(a1);

  var hyp=Math.sqrt(b*b+a*a),xr=b/hyp,yr=a/hyp;
  for (var z0=0;z0<hyp;z0++){
   clone=clone.cloneNode(false);
   clone.style.left=z0*xr+'px';
   clone.style.top=-z0*yr+'px';
   b1.appendChild(clone);
  }
  s1=clone.cloneNode(true)
  s1.style.height='10px';
  s1.style.left=a1.offsetLeft-10+'px';
  s1.style.top=b1.offsetTop-10+'px';
  obj.appendChild(s1);
  s1=clone.cloneNode(true)
  s1.style.width='10px';
  s1.style.left=a1.offsetLeft-10+'px';
  s1.style.top=b1.offsetTop-10+'px';
  obj.appendChild(s1);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('A'))
  t.style.left=b1.offsetLeft-10+'px';
  t.style.top=b1.offsetTop-10+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('C'))
  t.style.left=b1.offsetLeft+b+5+'px';
  t.style.top=b1.offsetTop-10+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('B'))
  t.style.left=b1.offsetLeft+b+'px';
  t.style.top=b1.offsetTop-a-20+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('b'))
  t.style.left=b1.offsetLeft+b/2+'px';
  t.style.top=b1.offsetTop+'px';
  obj.appendChild(t);

  clone.style.color='red';

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('a'))
  t.style.left=a1.offsetLeft+5+'px';
  t.style.top=a1.offsetTop+a/2+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('c'))
  t.style.left=b1.offsetLeft+b/2-10+'px';
  t.style.top=a1.offsetTop+a/2-10+'px';
  obj.appendChild(t);
}

res();
/*]]>*/
</script></body>
</html>

mort982a · 04-06-2012, 01:56 PM

Quote:

Originally Posted by vwphillips

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script>
function res(){
	a1 = parseFloat(document.getElementById("a1").value);
	c1 = parseFloat(document.getElementById("c1").value);
	b1 = Math.round(Math.sqrt((c1*c1)-(a1*a1))*100)/100;
	A1 = Math.round((Math.asin(a1/c1))*100*57.29577951308235)/100;
	B1 = Math.round((90-A1)*10000)/10000;

	if(a1 == 0 || c1 == 0) {
		alert("Du har ikke indtastet en værdi!");
	}
    else if (isNaN(a1) || isNaN(c1)) {
		alert("Du skal indtaste et tal!");
	}
    else if ( a1 >= c1)  {
		alert("Det er ikke muligt at a er mindre end c");
	}
    else  {
		document.getElementById("b1").value = b1;
		document.getElementById("A11").value = A1;
		document.getElementById("B11").value = B1 ;
        Draw(a1,c1)

	}
}
</script>
<div align="center">
	<table border="0" summary="">
		<tr>
        <div id="canvas" style="position:relative;width:250px;height:250px;border:solid black 1px;" ></div>

		</tr>


	</table>

<div align="center">
	<font size="4"><br />Indtast værdierne a og c, klik på Udregn
	<table width="300" height="0" border="0">
		<tr>
			<td>
				<form method="post" action="" name="veardi">
<table id="cal1" width="100%" border="0">
	<tr align="middel" valign="middel">
    			<b><font>a</font></b> =
				<input type="text" id="a1" name="a1" value="40" />
				<br />
				<b><font>c</font></b> =
				<input type="text" id="c1" name="c1" value="90">
				<br />
                <br />
                <b><font>C</font></b> =
				<input type="text" id="C1" name="C1" value="90" readonly="true">
				<br />
                <b><font>b</font></b> =
				<input type="text" id="b1" name="b1" value="0" readonly="true">
				<br />
                <b><font>A</font></b> =
				<input type="text" id="A11" name="A1" value="0" readonly="true">
				<br />
                <b><font>B</font></b> =
				<input type="text" id="B11" name="B1" value="0" readonly="true">
             </td>
       </tr>

	</font>
</div>
</form>
<tr align="center" valign="top">
<td width="0">
<div align="left">
	<input type="button" name="udregn" value="Udregn"onClick="res()">
</div>
</td>
<td width="1" height="65">
<div align="center"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

<table>
	<tr>
		<td><input type="button" value="Ny udregning" onClick="window.location.reload()"></td>
	</tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/

function Draw(a,c){
  var obj=document.getElementById('canvas'),w=obj.offsetWidth-40,b = Math.round(Math.sqrt((c*c)-(a*a))*100)/100,clone=document.createElement('DIV'),r=a/b,b1,a1,s1,t;
  b=Math.max(Math.min(b,w),w);
  a=b*r
  while (a>obj.offsetHeight-40){
   a--;
  }
  b=a/r;
  obj.innerHTML='';
  clone.style.position='absolute';
  clone.style.width='1px';
  clone.style.height='1px';
  clone.style.color='black';
  clone.style.backgroundColor='black';
  clone.style.fontSize='14px';
  b1=clone.cloneNode(true)
  b1.style.width=b+'px';
  b1.style.top=obj.offsetHeight-20+'px';
  b1.style.left=(obj.offsetWidth-b)/2+'px';
  obj.appendChild(b1);

  a1=clone.cloneNode(true)
  a1.style.height=a+'px';
  a1.style.left=(b1.offsetLeft+b)+'px';
  a1.style.top=b1.offsetTop-a+'px';
  obj.appendChild(a1);

  var hyp=Math.sqrt(b*b+a*a),xr=b/hyp,yr=a/hyp;
  for (var z0=0;z0<hyp;z0++){
   clone=clone.cloneNode(false);
   clone.style.left=z0*xr+'px';
   clone.style.top=-z0*yr+'px';
   b1.appendChild(clone);
  }
  s1=clone.cloneNode(true)
  s1.style.height='10px';
  s1.style.left=a1.offsetLeft-10+'px';
  s1.style.top=b1.offsetTop-10+'px';
  obj.appendChild(s1);
  s1=clone.cloneNode(true)
  s1.style.width='10px';
  s1.style.left=a1.offsetLeft-10+'px';
  s1.style.top=b1.offsetTop-10+'px';
  obj.appendChild(s1);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('A'))
  t.style.left=b1.offsetLeft-10+'px';
  t.style.top=b1.offsetTop-10+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('C'))
  t.style.left=b1.offsetLeft+b+5+'px';
  t.style.top=b1.offsetTop-10+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('B'))
  t.style.left=b1.offsetLeft+b+'px';
  t.style.top=b1.offsetTop-a-20+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('b'))
  t.style.left=b1.offsetLeft+b/2+'px';
  t.style.top=b1.offsetTop+'px';
  obj.appendChild(t);

  clone.style.color='red';

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('a'))
  t.style.left=a1.offsetLeft+5+'px';
  t.style.top=a1.offsetTop+a/2+'px';
  obj.appendChild(t);

  t=clone.cloneNode(true)
  t.appendChild(document.createTextNode('c'))
  t.style.left=b1.offsetLeft+b/2-10+'px';
  t.style.top=a1.offsetTop+a/2-10+'px';
  obj.appendChild(t);
}

res();
/*]]>*/
</script></body>
</html>

Thank you so much - But can u do me one more favor ? - Comment the lines in the canvas so i can defend it to the exam,

vwphillips · 04-06-2012, 02:46 PM

if this is for an exam the least you can do is analyse the code so that you understand it