How to make an image clickable within span button? - html

Question

I am trying to make a span within a button clickable. The span has a .png image within it. It will only act as a button when I click around the actual image, but not when I click on the image itself. I cant find any solutions that directly relates to my issue.
HTML
<button id="btn3"><span class"btn3"></span></button>
CSS
span.btn3 {
background: url("./images/raincloud.png") no-repeat top left;
background-size: contain;
cursor: pointer;
display: inline-block;
height: 80px;
width: 80px;
}
Edit:
Here is the JS function. It is meant to change the audio/video file when a certain button is clicked.
[].forEach.call(document.getElementsByClassName('btn'),
function(btn) {
btn.addEventListener('click', function(e) {
switch (e.target.id) {
case "btn3":
video.src = "./video/rain2.mp4";
video.play();
break;
case "btn4":
video.src = "./video/rain1.mp4";
video.play();
break;
case "btn5":
audio.src = "./audio/rain.mp4";
audio.play();
break;
case "btn6":
audio.src = "./audio/rain2.mp4";
audio.play();
break;
}
})
})

Answer 1

Missing =in class="btn3"
You want the ID of the parent of the target
your forEach is not very convincing. I delegate instead from the nearest container
const audio = document.getElementById("audio");
const video = document.getElementById("video");
document.getElementById("container").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.tagName == "SPAN") {
var id = tgt.closest("button").id;
console.log(id)
switch (id) {
case "btn3":
video.src = "./video/rain2.mp4";
video.play();
break;
case "btn4":
video.src = "./video/rain1.mp4";
video.play();
break;
case "btn5":
audio.src = "./audio/rain.mp4";
audio.play();
break;
case "btn6":
audio.src = "./audio/rain2.mp4";
audio.play();
break;
}
}
})
span.btn3 {
background: url(https://img.icons8.com/cotton/2x/cloud.png) no-repeat top left;
background-size: contain;
cursor: pointer;
display: inline-block;
height: 80px;
width: 80px;
}
<div id="container">
<button id="btn3"><span class="btn3"></span></button>
<button id="btn3"><span class="btn3"></span></button>
<button id="btn4"><span class="btn3"></span></button>
<button id="btn5"><span class="btn3"></span></button>
</div>
<audio id="audio" />
<video id="video" />

Answer 2

Add the onClick property via JavaScript to the span element (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick)
HTML
<button id="btn3"><span class="btn3" id="span_in_button"></span></button>
JavaScript
document.getElementById('span_in_button').onclick = function changeContent() {
// Your functionality here.
}
or by https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
or add onclick property directly into the HTML span element https://www.w3schools.com/TAgs/att_onclick.asp
in HTML body:
<button id="btn3"><span class="btn3" onclick="myFunction()"></span></button>
in HTML head:
<script>
function myFunction() {
// Your functionality here.
}
</script>