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

The battle between Hover, Focus, and Blur modes intensifies

Algorithmically alter the view of the webvr camera

Is the trigger feature malfunctioning in Chrome?

The shown.bs.tab event is causing an issue where the previous active tab cannot be retrieved

- What are the steps to integrate a different JavaScript plugin into a React project?

Tips for adjusting slider values using jQuery or Capybara

Disable the ability to close the dialog box by clicking

Steps for showcasing a automated slideshow

Unable to click on hyperlinks in TinyMCE's read-only mode

"Executing the ajax send() function does not result in any changes to the

Ways to implement CSS with javascript

Transform Vue.js into static HTML output

JavaScript - AJAX Call Terminated after a Period on Secure Socket Layer (SSL)

The table is unable to properly display the array data

jQuery error message: "Oops! Looks like content.fadeTo isn't a valid function."

Troubles with Internet Explorer compatibility when using jQuery Validate plugin and HTML5 Placeholder plugin

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

Different Div Sizes Based on Device Type (Bootstrap)

Performing subtraction on two arrays in Javascript

Progressively modifying related elements over time intervals