如何创建一个对象构造函数,用于为onclick函数指定键值对

时间:2017-04-10 20:23:38

标签: javascript function user-interface object-construction

我正在努力让朋友成为音板应用程序。用户界面将有一个4 x 5(或更多)网格系统,各种面孔都是.png格式,一旦点击,就会播放音频文件。

我不确定如何制作一个对象构造函数,它为一个对象提供一个带有指定声音文件的onclick函数。

我的目标是使用我的makeNewFace()函数来构建对象,为其提供图像值,声音文件值以及播放所述声音文件的自动onclick功能。

最后,我想将该对象推送到我的faceArray,它将自动显示在我的index.html文件上,作为.png面,并带有指定的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(){
    //????
}

1 个答案:

答案 0 :(得分:0)

您可能会尝试将其设为



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>
&#13;
&#13;
&#13;