onclick関数を使用してキー値のペアを割り当てるオブジェクトコンストラクタを作成するにはどうすればいいですか？

Question

私は友だち​​にサウンドボードアプリケーションを作成しようとしています。 UIには、いったんタップすると、オーディオファイルを再生する.png形式のさまざまな面の4 x 5（またはそれ以上）のグリッドシステムがあります。

オブジェクトに割り当てられたサウンドファイルを持つonclick関数を与えるオブジェクトコンストラクタを作成する方法がわかりません。

私の目標は、私のmakeNewFace()関数を使用してオブジェクトを構築し、イメージ値、サウンドファイル値、およびそのサウンドファイルを再生するための自動onclick機能を与えることです。

最後に、index.htmlファイルに.pngの顔として自動的に表示されるfaceArrayにオブジェクトをプッシュして、対応するサウンドファイルを再生するonclick関数を割り当てます。

私は意味があると思います。

//objects array with an image, sound, and string saying 

faceArray = [ 

{ image: 'numbaniFace.png', 
    sound: 'numbaniSaying.mp3', 
    saying: 'Nooombaniii' 
}, 

{ image: 'stanfordFace.png', 
    sound: 'stanfordSaying.mp3', 
    saying: 'Stanford Alumni' 
} 
]; 


function makeNewFace(image, sound, saying){ 
    this.image = image; 
    this.sound = sound; 
    this.saying = saying; 

    var newImg = document.createElement('img'); 
    newImg.setAttribute('src', image); 
    newImg.setAttribute('onclick', playSound(sound)); 
} 

function playSound(){ 
    //???? 
} 

Answer 1

あなたはおそらくあなたが関数を呼び出している

function MakeNewFace(img, snd, saying){ 
 
    this.image = img; 
 
    this.sound = new Audio(snd); 
 
    this.saying = saying; 
 
    this.newImg = document.createElement('img'); 
 
    this.newImg.setAttribute('src', this.image); 
 
    this.newImg.addEventListener("click", this.sound.play.bind(this.sound)); 
 
} 
 

 
var face = new MakeNewFace("http://metiscappadociatours.com/wp-content/uploads/2015/10/butterfly-balloons1.jpg","http://www.vibrationdata.com/Petrov_D.mp3","hey..!"), 
 
    myDiv = document.getElementById("myDiv"); 
 
myDiv.appendChild(face.newImg);

img { 
 
    margin: 0 5% 0; 
 
    max-width: 90%; 
 
    max-height: 100%; 
 
    }

<div id="myDiv"></div>