1

I want people to be able to change the music and the background on click (every background has its music)

Here's my code.

Html

<html>
  <div id="frame"></div>
</html>

Css

#frame {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
}

html, body {
  padding: 0;
  margin: 0;
}

Javascript

//array of three image urls
//arrays start counting from 0

images = [ 
  "img1.gif",
  "img2.gif",
  "img3.gif",
  "img4.gif"
];

function switchImage() {
  var frame = document.getElementById('frame');
  console.log(frame);
  frame.style.background = 'url(' + images[getRandomNumber()] + ')';
}

function getRandomNumber() {
  //return random num between 0 and array's length
  return Math.floor(Math.random() * images.length);
}

setInterval(switchImage, 1000);

The background changes randomly, I want it to change when we click on it. Also, how to add music? Thanks.

noo
  • 139
  • 2
  • 7
  • You can learn about adding click event handlers [here](http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) and how to play music [here](http://stackoverflow.com/questions/26133245/play-music-javascript). – Mike Cluck Dec 08 '15 at 00:03

0 Answers0