クリックすると、ユーザーが画像上でマウスでクリックしたポイントの xy 座標が表示されるボタンを作成したいと考えています。これまでのところ、これを実行しましたが、機能しません:
<script>
var data_str = '{ "source": {' +
'"name":' +
'[' +
'[' + pts_0[0][0] + ',' + pts_0[0][1] + '],' +
'[' + pts_0[1][0] + ',' + pts_0[1][1] + '],' +
'[' + pts_0[2][0] + ',' + pts_0[2][1] + ']' +
'],'
'} }' ;
</script>
<pre id='mydata'>
</pre>
<script>
document.getElementById('display-button').onclick = function (){
var data_el = document.getElementByID('mydata');
data_el.innerHTML = data_str;
}
</script>
ボタンをクリックすると、次のように表示されます。
{
"source": {
"name": "myface.png",
"points": [ ["10","23"], ["7","100"], ["77","11"] ]
},