Help to draw number triangle in div use javascipt

xecvantec

09-22-2011, 05:11 AM

I need to draw like image 1 in file attach.
But after i write 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>
<script type="text/javascript">
function Ve()
{
var n = document.getElementById("txtGiatri").value;
var i,j;

for(i=1;i<=n;i++)
{
for(j=0;j<n-i;j++)
document.getElementById ("place").innerHTML +=" ";
for(j=i;j>0;j--)
{
document.getElementById ("place").innerHTML +=j;

}
document.getElementById ("place").innerHTML +="<br/>";
}

}
</script>
<body>
<table>
<tr>
<td><input name="txtGiatri" type="text" id="txtGiatri" /></td>
<td><input name="btnVe" type="button" value="Ve" onclick="Ve();" /></td>
</tr>
<tr>
<td><div id="place"></div></td>
<td></td>
</tr>
</table>
</body>
</html>

i only have like image 2.

How i fixed it?

vwphillips

09-22-2011, 10:31 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function Ve(){
var n = document.getElementById("txtGiatri").value;
var i,j,k,ary;
for(i=1;i<=n;i++){
for(j=0;j<n-i;j++){
document.getElementById ("place").innerHTML +=" ";
}
ary=[];
for(j=i;j>i/2;j--){
ary.push(j%10)
document.getElementById ("place").innerHTML +=j%10;
}
ary.length-=i%2
for(k=ary.length-1;k>=0;k--){
document.getElementById ("place").innerHTML +=ary[k];
}
document.getElementById ("place").innerHTML +="<br/>";
}
}

</script>
<body>
<table>
<tr>
<td><input name="txtGiatri" type="text" id="txtGiatri" /></td>
<td><input name="btnVe" type="button" value="Ve" onclick="Ve();" /></td>
</tr>
<tr>
<td><div id="place"></div></td>
<td></td>
</tr>
</table>
</body>
</html>

xecvantec

09-22-2011, 11:07 AM

Ok, thanks for help!

I've already finish code

<center>
<input type="text" id="tamgiac_2" /><input type="button" value="Ve tam giac" onclick="drawtamgiac2()" />
</center>
<div id="tamgiac_id_2" style="text-align:center"></div>
<script language="javascript">
function drawtamgiac2(){
var soluong = parseInt(document.getElementById("tamgiac_2").value);
var html = "";
var current_i;
for (i=0; i<soluong; i++){
for (j=0; j<=i; j++){
current_i = ((i+1 - j));

if (current_i <= (i+1)/2) current_i = (j+1) ;

current_i = current_i % 10;

html += current_i + "   ";
}
html += "<br>";
}
document.getElementById("tamgiac_id_2").innerHTML = html;
}

</script>