javascript - json点击点

Question

我想制作一个按钮，单击该按钮将显示用户用鼠标在图像上单击的点的 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"] ]
 },