ボタンを1つの機能として動作させるためにボタンを追加する

私は現在、ボタンの追加と削除を行う2つのボタンを持っています。また、ユーザーのジオロケーションを取得する3番目のボタン。 3番目のボタンとして機能するように追加されたボタンを作成するにはどうすればよいですか？ボタンが追加されると、Geolocation機能が自動的に実行されます。ボタンを1つの機能として動作させるためにボタンを追加する

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <style> 
    button{ 
    height:100px; 
    width: 80px; 
    text-align: center; 
    margin: 5px 4px; 
    } 
    #mainButtons button{ 
    display: inline-block; 
    margin: auto; 
    } 
    </style> 


<div id="mainButtons"> 
<button onclick="addButton()">Add Contact</button> 
<button onclick="removeButton()">Remove Contact</button> 
</div> 
</br> 
<div id="que"></div> 

<script> 
var increment = 0; 
function addButton(){ 
$("#que").append($("<button id='btn"+(increment++)+"'>Send Location to: "+ (increment)+"</button>")); 
} 

function removeButton(){ 
    $("#btn"+(increment-1)).remove(); 
    increment--; 
} 
</script> 
</head> 
<body> 

<button onclick="getLocation()">Send Location to: </button> 

<p id="MyLocation"></p> 

<script> 
var x = document.getElementById("MyLocation"); 

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     x.innerHTML = "Geolocation is not supported by this browser."; 
    } 
} 

function showPosition(position) { 
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
} 
</script> 
</body> 
</html>

出典

2017-08-19 Jai Fiz

あなたのボタンにonclickを追加することはできませんか？ $（ "＃que"）。append（$（ ""））; ' – andrewgi

私はちょうどhtml/javaを学ぶことから始まるスマートな笑ではありません。これを試してみる –

これはJavaとは関係がありません。実際にJavaの質問タグを削除しました。 JavaとJavascriptの違いを参照してください。 –

これは、要素をgetLocationに渡すことで実現します。 JSBinでの作業例。

var increment = 0; 
function addButton(){ 
    var id = 'btn' + (increment++); 
    var que = $("#que"); 
    var el = $("<button id='"+id+"'>Click for location</button>"); 
    que.append(el); 
    clickHandler(el); 
} 

function removeButton(){ 
    if (increment >= 0) { 
    $("#btn"+(increment-1)).remove(); 
    increment--; 
    } 
} 

function clickHandler(el) { 
    el.click(function() { 
    getLocation(el); 
    }); 
} 

function getLocation(el) { 
    el.html("Loading...."); 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); }); 
    } else { 
    el.html("Geolocation is not supported by this browser."); 
    } 
} 

function showPosition(el, position) { 
    el.html("Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude); 
}

出典

2017-08-19 02:08:08

ありがとうございました。「Loading ...」ボタンをクリックした場合にのみ位置を表示できますか？ –

はい、可能です。要素に 'click'ハンドラを追加します。 [JSBin]（https://jsbin.com/siqamuduge/1/edit?js,output）に別の例を追加しました。 –

クリックしたとき、loactionは表示されませんでした –

イベントをバインドした後にボタンを追加しますか？

function showPosition(position) { 
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
} 
function addButton(){ 
var aa = $("<button id='btn"+(increment++)+"'>Send Location to: "+ (increment)+"</button>") 
$("#que").append(aa); 
$(aa).click(showPosition); 
}

出典

2017-08-19 01:54:36

「連絡先を追加」ボタンをクリックすると、「場所を送信：」ボタンが表示され、「削除ボタン」機能を妨げずにクリックされたときにユーザーの現在位置が表示されます。 –

ボタンを1つの機能として動作させるためにボタンを追加する

答えて

関連する問題