Question

我在github上找到了一个面积计算器项目我正在尝试使其在Android应用程序上运行我使服务器从android应用程序本地运行，它从gps获取经度和纬度通过页面重新加载，文本区域xi和yi从电话传感器重新加载数据

             id="xi">$LAT$
             id="yi">$LON$

apk搜索文本LAT和LON，以及是否有数据替换它。我无法找到一种方法来使带有按钮的文本区域重新加载而不重新加载页面我尝试了许多脚本，但是我的JavaScript知识很差

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery.min.js"></script>
		<script type="text/javascript" src="jquery-1.12.0.min.js"></script>


<script>
function init(){
	sessionStorage.setItem("ptnum", "0");
}
function reload(){

	addPoint()
}
function addPoint(){
	var table = document.getElementById("table");
	
	// update pts counter
	var ptnum = Number(sessionStorage.getItem("ptnum"));
	ptnum++;
	sessionStorage.setItem("ptnum", ptnum);
	
	// remove last row (button)
	table.deleteRow(ptnum);
	
	// add a new row to the table for the new point
	var new_row = document.createElement("tr");
	
	var cell1 = document.createElement("td");
	var cell2 = document.createElement("td");
	var cell3 = document.createElement("td");
	
	cell1.innerHTML = "<center>PT&nbsp;" + ptnum + "</center>";
	cell2.innerHTML = "<center><input id='inx' type='text' style='width:80%'></center>"
	cell3.innerHTML = "<center><input id='iny' type='text' style='width:80%'></center>"
	
	new_row.appendChild(cell1);
	new_row.appendChild(cell2);
	new_row.appendChild(cell3);
	
	table.appendChild(new_row);
	
	// create the new button
	var but_row = document.createElement("tr"); 
	but_row.colspan = "3";
	
	but_row.innerHTML = "<input id='b' type='button' onclick='confirm()' value='OK' style='width:100%'>";
	
	table.appendChild(but_row);
}

function confirm(){
	var ptnum = Number(sessionStorage.getItem("ptnum"));
	var table = document.getElementById("table");
	//ΕΔΩ ΘΑ ΓΙΝΕΙ Η ΑΛΛΑΓΗ...ΘΑ ΠΑΡΕΙ ΑΠΟ ΤΟ GPS LAT LON ΚΑΙ ΤΕΛΟΣ!!!

	var x = document.getElementById("xi").value;
	var y = document.getElementById("yi").value;
	// sanitize input
	x = x.replace(",", ".");
	y = y.replace(",", ".");
	
	// update point data
	sessionStorage.setItem("x"+ptnum, x);
	sessionStorage.setItem("y"+ptnum, y);
	
	// remove old rows
	table.deleteRow(ptnum+1);
	table.deleteRow(ptnum);
	
	// create new point row
	var new_row = document.createElement("tr");
	
	var cell1 = document.createElement("td");
	var cell2 = document.createElement("td");
	var cell3 = document.createElement("td");
	
	cell1.innerHTML = "<center>PT&nbsp;" + ptnum + "</center>";
	cell2.innerHTML = "<center>" + x + "<center>";
	cell3.innerHTML = "<center>" + y + "<center>";
	
	new_row.appendChild(cell1);
	new_row.appendChild(cell2);
	new_row.appendChild(cell3);
	
	table.appendChild(new_row);
	
	// create new button
	var but_row = document.createElement("tr"); 
	but_row.colspan = "3";
	
	but_row.innerHTML = "<input id='b' type='button' onclick='addPoint()' value='Add a point' style='width:100%'>";
	
	table.appendChild(but_row);
	
	updateArea();

}

function updateArea(){
	var ptnum = Number(sessionStorage.getItem("ptnum"));
	
	var i = 0;
	
	var A = 0;
	
	for(i=1; i<=ptnum; i++)
	{
		var past_x = 0;
		var next_x = 0;
		var this_y = (sessionStorage.getItem("y"+i));
		
		if(i != 1)
			past_x = (sessionStorage.getItem("x"+(i-1)))
		else
			past_x = (sessionStorage.getItem("x"+ptnum));
			
		if(i != ptnum)
			next_x = (sessionStorage.getItem("x"+(i+1)))
		else
			next_x = (sessionStorage.getItem("x1"));
		
		A += this_y * ( next_x - past_x);
	}
	
	A /= 2;
	
	if(A < 0)
		A = -A;
	
	document.getElementById("area").innerHTML = "AREA: " + A;
}
</script>
	</head>
	
	<body onload="init()">
		<center>

			<table width="100%" border="5vmin" id="table">
				<tr>
					<td><center><b>Pt</b></center></td>
					<td><center><b>X</b></center></td>
					<td><center><b>Y</b></center></td>
				</tr>
				
				<tr>
					<td colspan="3">
						<center>
							<input id="table_button" type="button" value="Add a point" onClick="reload()" style="width:100%">
						</center>
					</td>
				</tr>
			</table>
			
			
			<h3 id="area">AREA: </h3>
			
			<br>
			<hr>

		</center>
         <textarea id="xi">$LAT$</textarea>
		 <textarea id="yi">$LON$</textarea>
	</body>
</html>

Javascript HTML textArea仅刷新。不是整个页面

0 个答案: