Javascript Question posted in
A very good W3school tutorial can be found here.

Get image src then use it for div background javascript

When someone clicks on one of these images I would like that image to appear as the background image of div "slides", and am not sure what is going wrong. Maybe I am not using "this" properly.

function showslide() {
  y = document.getElementById("slides");
  y.style.display = "block";
  z = this.src;
  y.backgroundImage = 'url(' + z + ')';
}
<div id="slides">Div</div>
<div id="slidermenu">
  <img class="slidermenuimage" src="https://placehold.co/600x400/red/white" onclick="showslide()"/><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/orange/white" onclick="showslide()"/><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/yellow/white" onclick="showslide()"/><br>
</div>
Tags:

3

Answers


  1. 0

    Instead of using this, pass event into your functions. Then use event.target

    You also need to use y.style.backgroundImage You left out the .style

    By default the slides div has 0px height, so you need to set a height to see the background image.

    See my EDIT comments in the code snippet for specific edits.

    // EDIT add event as a parameter
// function showslide() {
function showslide(event) {
  y = document.getElementById("slides");
  y.style.display = "block";

  // EDIT Use event.target instead of this
  // z = this.src;
  z = event.target.src;

  // EDIT You need .style
  // y.backgroundImage = 'url('+z+')';
  y.style.backgroundImage = 'url('+z+')';
}
    /* EDIT slides needs a height so you can see the background image */
#slides {
  height: 100px;
}

/* EDIT For the demo */
.slidermenuimage {
  margin: 1rem;
  width: 64px;
}
    <div id="slides"></div>

<div id="slidermenu">
  <img class="slidermenuimage" src="https://placebear.com/400/400.jpg" onclick="showslide(event)"/><br>
  <img class="slidermenuimage" src="https://placebear.com/401/400.jpg" onclick="showslide(event)"/><br>
  <img class="slidermenuimage" src="https://placebear.com/402/400.jpg" onclick="showslide(event)"/><br>
</div>
    Login or Signup to reply.
  2. 0

    Yes you are using this wrong, because you use inline event handlers which is not recommended. See the other answer for the inline handling

    Also the assignment of backgroundImage is missing style.

    Instead use addEventListener on the container so you can delegate

    window.addEventListener('load', () => { // when the elements are available
  const slides = document.getElementById("slides");
  document.getElementById('slidermenu').addEventListener('click', (event) => {
    const tgt = event.target;
    if (!tgt.matches('.slidermenuimage')) return; // not an image
    slides.style.backgroundImage = `url(${tgt.src})`;
  });
});
    #slides {
  width: 600px;
  height: 400px;
  border: 1px solid black;
}

.slidermenuimage {
  border: 1px solid white;
}
    <div id="slides">Div</div>
<div id="slidermenu">
  <img class="slidermenuimage" src="https://placehold.co/600x400/red/white" /><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/orange/white" /><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/yellow/white" /><br>
</div>
    Login or Signup to reply.
  3. 0

    Event Delegation

    • Although it’s big in React, inline event handlers (or on-event handlers) are still discouraged. Use addEventListener() method.

    • If you have multiple elements needing an event handler❇, add the event handler (via addEventListener() to an ancestor element they all have in common. That could be window, document, body, etc. but it’s better if you choose the closest one to the elements you intend to interact with. In your particular layout that would be #slidermenu (in Demo it’s renamed #image-menu). See Example 1 below.

      Example 1

      <div id="image-menu"> <!-- Add event handler here... -->
  <img ...> <!-- if you want to control all of the children -->
  <img ...>
  <img ...>
</div>

      ❇ event handler is a function that’s used to handle an event via .eventListener(), on-property, or on-event.

    • When you write your event handler, you determine which elements will react to the event and exclude all other elements simply by not even mentioning them. To help you sort out the specific element the user interacted with (eg. "clicked"), use the event.target property. See Example 2 below.

      Example 2

      // Event object is passed by default
const eventHandler = (event) => {
  // Find out which element user clicked
  const clk = event.target;
  // Specify which elements you want
  if (clk.matches("img")) {
    // Define what happens here
  }
  /**
   * You don't need to do anything else unless there
   * are other elements you wish to have react as well.
   */
};

    Demo

    /**
 * Handles "click" events. It assigns the
 * src of the <img> the user clicked to 
 * div#slides.
 * @param {object} event - Event object
 */
function showSlide(event) {
  // This is the element the user clicked
  const x = event.target;
  // If the user clicked an <img>...
  if (x.matches("img")) {
    // reference div#slides...
    const y = document.getElementById("slides");
    // get the url of the clicked <img>
    const z = event.target.src;
    // assign the styles to div#slides
    y.style.cssText = 'min-height: 100px; background-image: url(' + z + ');';
  }
}

/**
 * Register div#image-menu to listen for the
 * "click" event when triggered on itself
 * and it's children (eg. all <img>s).
 */
document.getElementById("image-menu").addEventListener("click", showSlide);
    <div id="slides"></div>
<div id="image-menu">
  <img src="https://placehold.co/100x100/red/white"/>
  <img src="https://placehold.co/100x100/blue/yellow">
  <img src="https://placehold.co/100x100/yellow/blue">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search