フォームのテキストボックスからのJavaScript VAR

Question

NorthingsとEastingsを経度と緯度に変換するスクリプトが見つかりました。現在、NorthingsとEastingsはスクリプトにハードコードされた変数（N & E）です。私は彼らに2つのテキストボックスから来てほしい。

現在のところ、この変換は、ページが読み込まれたときに発生します。理想的なのは、NorthingsとEastingsが入力されたときに自動的に経度と緯度をデータベースにアップロードできる別のテキストボックスに変換して入力することです。

ありがとうございます。javascriptは私の強みではないので、助けていただければ幸いです。

http://jsfiddle.net/De6HP/7/

// Original by Chris Veness http://www.movable-type.co.uk/scripts/latlong-gridref.html 
Number.prototype.toRad = function() { 
    return this * Math.PI/180; 
} 

Number.prototype.toDeg = function() { 
    return this * 180/Math.PI; 
} 

var E = 657177 
var N = 172273 

var a = 6377563.396, b = 6356256.909;    // Airy 1830 major & minor semi-axes 
var F0 = 0.9996012717;        // NatGrid scale factor on central meridian 
var lat0 = 49*Math.PI/180, lon0 = -2*Math.PI/180; // NatGrid true origin 
var N0 = -100000, E0 = 400000;      // northing & easting of true origin, metres 
var e2 = 1 - (b*b)/(a*a);       // eccentricity squared 
var n = (a-b)/(a+b), n2 = n*n, n3 = n*n*n; 

var lat=lat0, M=0; 
do { 
    lat = (N-N0-M)/(a*F0) + lat; 

    var Ma = (1 + n + (5/4)*n2 + (5/4)*n3) * (lat-lat0); 
    var Mb = (3*n + 3*n*n + (21/8)*n3) * Math.sin(lat-lat0) * Math.cos(lat+lat0); 
    var Mc = ((15/8)*n2 + (15/8)*n3) * Math.sin(2*(lat-lat0)) * Math.cos(2*(lat+lat0)); 
    var Md = (35/24)*n3 * Math.sin(3*(lat-lat0)) * Math.cos(3*(lat+lat0)); 
    M = b * F0 * (Ma - Mb + Mc - Md);    // meridional arc 

} while (N-N0-M >= 0.00001); // ie until < 0.01mm 

var cosLat = Math.cos(lat), sinLat = Math.sin(lat); 
var nu = a*F0/Math.sqrt(1-e2*sinLat*sinLat);    // transverse radius of curvature 
var rho = a*F0*(1-e2)/Math.pow(1-e2*sinLat*sinLat, 1.5); // meridional radius of curvature 
var eta2 = nu/rho-1; 

var tanLat = Math.tan(lat); 
var tan2lat = tanLat*tanLat, tan4lat = tan2lat*tan2lat, tan6lat = tan4lat*tan2lat; 
var secLat = 1/cosLat; 
var nu3 = nu*nu*nu, nu5 = nu3*nu*nu, nu7 = nu5*nu*nu; 
var VII = tanLat/(2*rho*nu); 
var VIII = tanLat/(24*rho*nu3)*(5+3*tan2lat+eta2-9*tan2lat*eta2); 
var IX = tanLat/(720*rho*nu5)*(61+90*tan2lat+45*tan4lat); 
var X = secLat/nu; 
var XI = secLat/(6*nu3)*(nu/rho+2*tan2lat); 
var XII = secLat/(120*nu5)*(5+28*tan2lat+24*tan4lat); 
var XIIA = secLat/(5040*nu7)*(61+662*tan2lat+1320*tan4lat+720*tan6lat); 

var dE = (E-E0), dE2 = dE*dE, dE3 = dE2*dE, dE4 = dE2*dE2, dE5 = dE3*dE2, dE6 = dE4*dE2, dE7 = dE5*dE2; 
lat = lat - VII*dE2 + VIII*dE4 - IX*dE6; 
var lon = lon0 + X*dE - XI*dE3 + XII*dE5 - XIIA*dE7; 

Math.PI/180 

window.onclick = function() { 
    document.getElementById('result').innerHTML = 'longditude: ' + lon.toDeg(); 
    document.getElementById('result1').innerHTML = 'Latitude: ' + lat.toDeg(); 
} 

Answer 1

あなたは彼らが適切に更新されているとき、それは自動的に緯度/経度を計算することができblurイベントにテキストボックスにイベントリスナーを追加することによって、正しい道にしています。あなたの緯度/経度コードはちょっと混乱していますので、ここではあまり変更されませんでした。私は2つの入力を持つ関数でラップしました。

私がコード内で行ったことは、blurのイベントリスナーを追加して、validateInputs()を呼び出して、テキストボックスに2つの有効な入力があることを確認します。

document.getElementById('txtInputN').addEventListener('blur', validateInputs); 
 
document.getElementById('txtInputE').addEventListener('blur', validateInputs); 
 

 
function validateInputs() { 
 
    const valN = document.getElementById('txtInputN').value; 
 
    const valE = document.getElementById('txtInputE').value; 
 

 
    document.getElementById('result').innerHTML = ''; //Clear the textbox since we might not have valid input 
 

 
    if (valN && valE) { //Make sure we have values 
 
    if (valN >= 0 && valE >= 0) { //Due to implicit conversions, if it's text this won't pass 
 
     calcResult(valN, valN) //We have valid inputs, so pass them here. 
 
    } 
 
    } 
 
} 
 

 
// Original by Chris Veness http://www.movable-type.co.uk/scripts/latlong-gridref.html 
 
Number.prototype.toRad = function() { 
 
    return this * Math.PI/180; 
 
} 
 

 
function calcResult(inputN, inputE) { 
 

 
    Number.prototype.toDeg = function() { 
 
    return this * 180/Math.PI; 
 
    } 
 

 
    var E = 657177 
 
    var N = 172273 
 

 
    var a = 6377563.396, 
 
    b = 6356256.909; // Airy 1830 major & minor semi-axes 
 
    var F0 = 0.9996012717; // NatGrid scale factor on central meridian 
 
    var lat0 = 49 * Math.PI/180, 
 
    lon0 = -2 * Math.PI/180; // NatGrid true origin 
 
    var N0 = -100000, 
 
    E0 = 400000; // northing & easting of true origin, metres 
 
    var e2 = 1 - (b * b)/(a * a); // eccentricity squared 
 
    var n = (a - b)/(a + b), 
 
    n2 = n * n, 
 
    n3 = n * n * n; 
 

 
    var lat = lat0, 
 
    M = 0; 
 
    do { 
 
    lat = (N - N0 - M)/(a * F0) + lat; 
 

 
    var Ma = (1 + n + (5/4) * n2 + (5/4) * n3) * (lat - lat0); 
 
    var Mb = (3 * n + 3 * n * n + (21/8) * n3) * Math.sin(lat - lat0) * Math.cos(lat + lat0); 
 
    var Mc = ((15/8) * n2 + (15/8) * n3) * Math.sin(2 * (lat - lat0)) * Math.cos(2 * (lat + lat0)); 
 
    var Md = (35/24) * n3 * Math.sin(3 * (lat - lat0)) * Math.cos(3 * (lat + lat0)); 
 
    M = b * F0 * (Ma - Mb + Mc - Md); // meridional arc 
 

 
    } while (N - N0 - M >= 0.00001); // ie until < 0.01mm 
 

 
    var cosLat = Math.cos(lat), 
 
    sinLat = Math.sin(lat); 
 
    var nu = a * F0/Math.sqrt(1 - e2 * sinLat * sinLat); // transverse radius of curvature 
 
    var rho = a * F0 * (1 - e2)/Math.pow(1 - e2 * sinLat * sinLat, 1.5); // meridional radius of curvature 
 
    var eta2 = nu/rho - 1; 
 

 
    var tanLat = Math.tan(lat); 
 
    var tan2lat = tanLat * tanLat, 
 
    tan4lat = tan2lat * tan2lat, 
 
    tan6lat = tan4lat * tan2lat; 
 
    var secLat = 1/cosLat; 
 
    var nu3 = nu * nu * nu, 
 
    nu5 = nu3 * nu * nu, 
 
    nu7 = nu5 * nu * nu; 
 
    var VII = tanLat/(2 * rho * nu); 
 
    var VIII = tanLat/(24 * rho * nu3) * (5 + 3 * tan2lat + eta2 - 9 * tan2lat * eta2); 
 
    var IX = tanLat/(720 * rho * nu5) * (61 + 90 * tan2lat + 45 * tan4lat); 
 
    var X = secLat/nu; 
 
    var XI = secLat/(6 * nu3) * (nu/rho + 2 * tan2lat); 
 
    var XII = secLat/(120 * nu5) * (5 + 28 * tan2lat + 24 * tan4lat); 
 
    var XIIA = secLat/(5040 * nu7) * (61 + 662 * tan2lat + 1320 * tan4lat + 720 * tan6lat); 
 

 
    var dE = (E - E0), 
 
    dE2 = dE * dE, 
 
    dE3 = dE2 * dE, 
 
    dE4 = dE2 * dE2, 
 
    dE5 = dE3 * dE2, 
 
    dE6 = dE4 * dE2, 
 
    dE7 = dE5 * dE2; 
 
    lat = lat - VII * dE2 + VIII * dE4 - IX * dE6; 
 
    var lon = lon0 + X * dE - XI * dE3 + XII * dE5 - XIIA * dE7; 
 

 
    Math.PI/180 
 
    document.getElementById('result').innerHTML = 'Latitude: ' + lat.toDeg() + '<br /> Longitude: ' + lon.toDeg(); 
 
}

Result is: 
 
<div id="result"></div> 
 
<br /> 
 
<span>N: </span> 
 
<input type="text" id="txtInputN" /> 
 
<br /> 
 
<span>E: </span> 
 
<input type="text" id="txtInputE" />

Answer 2

を開始するための何か。

<div> 
    Northings: 
    <input id="north" type="text" onblur="Calculate()" /> 
    Eastings: 
    <input id="east" type="text" onblur="Calculate()" /> 
</div> 
<br/> 
Result is: 
<div id="longditude"></div> 
<div id="latitude"></div> 

http://jsfiddle.net/ptm1umad/