This question already has an answer here:
I'm working on a easy page with animal pictures and I want to play the sound when you click on DIV but since I'm just a beginner with javascript I need a little help with that. I tried copying something from a different website but apparently it doesn't work. All of the sound files are in the same folder as pictures and other files
Also I would appreciate any help or advices for html, css and javascript. I started making websites less than a month ago so it's pretty hard for me to understand how everything works.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: hotpink;
}
.container {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
width: 400px;
height: 400px;
display: grid;
grid-template-columns: 200px 200px;
grid-row: auto auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.box {
background-color: white;
padding: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.img {
width: 100px;
height: 100px;
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Animal Sounds</title><link rel="stylesheet" href="styles.css"><script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementsByClassName("box").innerHTML = "<embed src=\"" + soundfile + "\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}</script></head><div class='container'><div class='box' onclick="playSound('cat.mp3');"><img class='img' src='cat.jp2' alt='cat'></div><div class='box' onclick="playSound('lion.mp3');"><img class='img' src='lion.jpg' alt='lion'></div><div class='box' onclick="playSound('dog.mp3');"><img class='img' src='dog.gif' alt='dog'></div><div class='box' onclick="playSound('elephant.mp3');"><img class='img' src='elephant.png' alt='elephant'></div></div></body></html>