JavaScript初学者です。
htmlページのボタンを押したときにイベントが発生するということをしたいです。
ボタンを押した場合そのボタンの近くに写真(.jpg)が追加されるというものを作成したいです。(本当はボタンではなくどこでもクリックすれば追加されるということがやりたいのですが、いくつか調べた感じではできなさそうだったのでボタンにしています。ボタンを使わず、マウスの場所にクリックで写真を追加する方法がある場合は教えていただきたいです。)
html
1<html lang = "ja" > 2<head></head> 3<body> 4<button id = "btn">bottun</button> 5</body> 6<script> 7 let Pic = function(){ 8 this.image = new Image(); 9 this.image.style.position = "fixed" 10} 11 let Pic1 = function(){ 12 Pic.apply(this,arguments); 13 this.x = 0; 14 this.y = 0; 15 this.image.src = "picture.jpg" 16} 17 18 window.onload = function(){ 19 pic = new Pic1() 20 document.body.appendChild(pic.image) 21 document.getElementById("btn").onclick = MouseClick; 22} 23 function MouseClick(e){ 24 pic.x = (e.clientX - pic.image.width /2) 25 pic.y = (e.clientY - pic.image.height/2) 26} 27</script> 28</html> 29
以上がコードなのですがイベントの関数が作動せずボタンをクリックしても何も起こらないです。
有識者の方に助言してもらえればうれしいです。