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

What is the best way to implement pushstate degradation – using backbone.history or history.js?

Is there a way to resize a photo that I want to upload?

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

Customize the appearance of every other column in an asp gridview

Having trouble getting the hover effect to change the colors of CSS borders

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

What is the best way to select the element where a user has clicked using JavaScript?

5-item carousel in CSS gridView

I need to create a login form using Angular - what steps should I follow?

spark of unique substance

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

What steps can I take to ensure my header appears perfectly aligned? (HTML/CSS)

After changing the form action using jQuery, the GET variables mysteriously vanish

Issue encountered while implementing async functionality in AngularFireObject

Navigating HTML with Node.js and Express.js

The spinner persists even after the fetch api call

Discovering the CSS code for customization

Moving a component beyond its container using a query

The div element is persisting despite AJAX attempts to remove it

What is the process for utilizing Sass in Vue CLI rather than node-sass (which is the default for sass-loader)?