Unable to modify the background image of a div using jQuery

Question

Unable to modify the background image of a div using jQuery

I'm encountering an issue in my script where I tried to implement an event that changes the background-image of a div when a button is clicked, but it's not functioning as intended.

Below is the code snippet:

HTML

<div class="col-md-2 imageCard" style="float:left">
            <img class="card-img-top"
              src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap">
</div>

<div class="card-body">
          <blockquote class="blockquote mb-0">
            <p id="quoteSample">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer" id="quoteAuthorSample">Someone famous in </footer>
          </blockquote> 
</div>

JS

$('.imageCard').click(function(){
    var imageSRC = ($(this).children('img').attr('src'));
    console.log(imageSRC)
    $('.card-body').css("background-image", "url(" + imageSRC + ")")
})

The output from console.log shows:

javascript html jquery css

Answer 1

Answer №1

It seems like the $('.imageCard') button element is not being detected by the script when it tries to set the event listener (in this case: click).

To resolve this issue, you have a couple of options:

Consider placing your script tag at the bottom of the page so that it loads just before the HTML, allowing it to locate the button that has already been rendered.
Alternatively, you can attach your jquery click within a window load event handler, as shown below:
```
$(document).ready(function() {
    // Jquery click event
});
```
This approach ensures that your javascript DOM code executes only after the document (HTML page) has finished rendering completely

I hope this information proves helpful!

Answer 2

It seems like the $('.imageCard') button element is not being detected by the script when it tries to set the event listener (in this case: click).

To resolve this issue, you have a couple of options:

Consider placing your script tag at the bottom of the page so that it loads just before the HTML, allowing it to locate the button that has already been rendered.
Alternatively, you can attach your jquery click within a window load event handler, as shown below:
```
$(document).ready(function() {
    // Jquery click event
});
```
This approach ensures that your javascript DOM code executes only after the document (HTML page) has finished rendering completely

I hope this information proves helpful!

Answer 3

Answer №2

After some investigation, I discovered the issue lies in the way the concatenation assignment is being handled for the background-image CSS property. While this property can accept a URL by using the url() function, it is important to note that the argument passed to url() should be a string. Although this approach works seamlessly in vanilla JavaScript, when you are adding this property through a function (using strings as parameters), extra caution is required to ensure the correct output. Here is an illustration of how to handle this situation (you can experiment with this in your browser console):

Firstly, assign a link to a variable:

    var imageSRC = "https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"

Simply running the following line will result in:

    "url(" + imageSRC + ")" // "url(https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg)"

Now, observe the link within the url() function - it is no longer treated as a string but rather as plain text, which doesn't comply with the requirement for url() to receive a string.

To rectify this issue, you have two options:

Instead of using "url(" + imageSRC + ")", opt for "url('" + imageSRC + "')" to ensure the correct quotes are applied to the parameter.
Alternatively, utilize JavaScript template strings (more information available here: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings)
```
`url("${imageSRC}")`
```

Answer 4

After some investigation, I discovered the issue lies in the way the concatenation assignment is being handled for the background-image CSS property. While this property can accept a URL by using the url() function, it is important to note that the argument passed to url() should be a string. Although this approach works seamlessly in vanilla JavaScript, when you are adding this property through a function (using strings as parameters), extra caution is required to ensure the correct output. Here is an illustration of how to handle this situation (you can experiment with this in your browser console):

Firstly, assign a link to a variable:

    var imageSRC = "https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"

Simply running the following line will result in:

    "url(" + imageSRC + ")" // "url(https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg)"

Now, observe the link within the url() function - it is no longer treated as a string but rather as plain text, which doesn't comply with the requirement for url() to receive a string.

To rectify this issue, you have two options:

Instead of using "url(" + imageSRC + ")", opt for "url('" + imageSRC + "')" to ensure the correct quotes are applied to the parameter.
Alternatively, utilize JavaScript template strings (more information available here: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings)
```
`url("${imageSRC}")`
```

Unable to modify the background image of a div using jQuery

Answer №1

Answer №2

Similar questions

Attempting to transmit multiple variables

Guide to adding an icon within an HTML `<input>` element

Nested loops combined with a timeout occasionally results in failure

Is there a way for me to set distinct values for the input box using my color picker?

What is the best way to incorporate this code snippet into an object's value?

Refreshing the page in Next.js causes issues with the CSS classNames

MUI-Datatable rows that can be expanded

Locating the source of the function call within a file in Node.js

Chrome browser not responding to jQuery .html refresh

Implement JQuery to display a loading message whenever an a tag is clicked

Is There a Way to Abandon a route and Exit in Express during a single request?

I am encountering difficulties with hosting a project that was created using Next.js

Mastering the Art of jQuery Post with Iteration and Result Utilization

Is it possible for PHP to use the set cookie function to replace the cookie value set by JQuery cookie?

Create a rectangle when the mouse is pressed down

How to enable seeking functionality for mp3 files with PHP

Is d3 Version pretending to be a superior version?

Is there a simple solution to show script 1 to visitors from the US and Canada, while displaying script 2 to visitors from other countries?

Visual Studio Code unable to locate source maps for typescript debugging

What's preventing it from being cached?