如何製作一個對象構造函數，用onclick函數分配一個鍵值對

我正在嘗試讓一個朋友成爲一個音板應用程序。用戶界面將有一個4 x 5（或更多）的網格系統，其中包含一個.png格式的各種面孔，一旦點擊就會播放一個音頻文件。如何製作一個對象構造函數，用onclick函數分配一個鍵值對

我不知道如何製作一個對象構造函數，該對象構造函數使用指定的聲音文件爲對象提供onclick函數。

我的目標是使用我的makeNewFace()函數來創建一個對象，給它一個圖像值，一個聲音文件值和一個自動onclick函數來播放所述聲音文件。

最後，我想將該對象推送到我的臉上，陣列將自動顯示在我的index.html文件上，並用指定的onclick函數作爲.png臉部來播放其匹配的聲音文件。

我希望我有道理。

//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(){ 
    //???? 
}

來源

2017-04-10 Alex Williams

你調用該函數。你需要傳遞一個調用它的函數。 – SLaks

你也許可能會嘗試使它像

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>

來源

2017-04-10 23:02:02 Redu

謝謝！太棒了。我非常感謝@Redu的幫助 –

如何製作一個對象構造函數，用onclick函數分配一個鍵值對

回答

相關問題