Tips for creating a clickable image inside a span button

Question

Tips for creating a clickable image inside a span button

I am trying to create a clickable button that includes a span with a .png image inside. Currently, the button only responds when I click around the image, not directly on it. I have searched for solutions but haven't found one that addresses my specific 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:

Below is the JavaScript function responsible for changing the audio/video file when a specific 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;
    }
  })
})

html css

Answer 1

Answer №1

A mistake is present where the = sign is missing in the class="btn3"
To obtain the ID of the parent element instead of the target, you can use closest("button") method
Your forEach loop might not be very effective. It is better to delegate events 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

A mistake is present where the = sign is missing in the class="btn3"
To obtain the ID of the parent element instead of the target, you can use closest("button") method
Your forEach loop might not be very effective. It is better to delegate events 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 3

Answer №2

To dynamically add the onClick property to the span element in JavaScript, you can reference the official documentation.

Here is an example of how to accomplish this:

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.

}

You can also utilize the click event or directly add the onclick property to the HTML span element according to W3Schools:

Add onclick property within the HTML body:

<button id="btn3"><span class="btn3" onclick="myFunction()"></span></button>

Include it in the HTML head:

<script>
function myFunction() {
    // Your functionality here.
}
</script>

Answer 4

To dynamically add the onClick property to the span element in JavaScript, you can reference the official documentation.

Here is an example of how to accomplish this:

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.

}

You can also utilize the click event or directly add the onclick property to the HTML span element according to W3Schools:

Add onclick property within the HTML body:

<button id="btn3"><span class="btn3" onclick="myFunction()"></span></button>

Include it in the HTML head:

<script>
function myFunction() {
    // Your functionality here.
}
</script>

Tips for creating a clickable image inside a span button

Answer №1

Answer №2

Similar questions

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

Delayed response of text effects in JQuery on page load

Nested foreach loops interacting with one another

Chrome reload causing page to automatically scroll to bottom on my website

Display a tooltip when you click on a different element

Pop-up - maintain the initial value

Is there a way to remove a pseudo element in CSS using Internet Explorer

Stop the form submission until validation is complete

Connecting the search results page with the specific details page

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

Tips for aligning multiline text in the center of images with varying widths

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

Struggling to center divs in HTML and CSS but running into issues on mobile devices?

What is the process for closing the lightbox?

Creating a CSS layout that eliminates the need for a vertical scroll bar

Displaying PHP content using JavaScript classes

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Center text within CSS shapes

Determine selected option in Radio Button

Can you provide me with a variable that will give me the total size of the scrollbar?