CODEWITHSUNDEEP
javascriptjquerycss
Caladin00
Caladin00

Reputation: 356

img CSS will not update onclick via jQuery

I have been banging my head against this for a few hours and am no closer to a solution than I was before. I am dynamically generating <img> tags, each with their own unique ID, via an AJAX call and JavaScript and giving them certain border colors upon generation (marking whether they are 'good' or 'bad`).

// the div that the screenshots go in
<div id ="screenshots_holder"> </div>


// the JS that is generating the screenshots

var screenshots_holder = document.getElementById("screenshots_holder");
var x = "";


for(i in data.screenshots) {

var image_name = data.screenshots[i].split("/")

x += '<img id="' + image_name[2] +'"src="/static/'; 
x += data.screenshots[i]; 
x += '" style = "height: auto; border-style: solid; border-width: 5px; border-color: #1ebe1e; max-width: 10%; margin-right: 10px; margin-bottom: 10px; "'; 
x += 'onclick="blueifyScreenshot(this.id)" >'; <-- the problem is here!!

}
screenshots_holder.innerHTML = x;

This above code worked just fine... minus the very last part where I add the onclick attribute!

I am trying to make it so that when I click on a screenshot, its border changes color, it scales just a bit, and adds a box-shadow, all of which is done through a JavaScript function called blueifyScreenshot(id) which takes the unique id of the image as a parameter so it can be grabbed through jQuery.

Right now, I can get the screenshot to do that when I hover over it but that's not permanent. Unfortunately, I cannot get any of my CSS changes to go through.

Right now I am grabbing each image element by a jQuery id selector. I know that this is working and updated_id is what it should be because I've verified it through HTML/JS breakpoints in the debugger and matched it to the screenshot that I want to change the border of. blueifyScreenshot IS being called, but none of the CSS is changing no matter what I do.

I have tried using the .css method, which I know only works on existing elements, which my screenshots are.

function blueifyScreenshot(id) {

console.log("#" + id);
var updated_id = "#" + id;

// this isn't changing anything
$(updated_id).css({
   "border-color": "#0614d1 !important",
   "cursor" : "pointer" ,
   "transform": "scale(1.1)",
   "box-shadow": "0 0 12px #0614d1" });

}

I have tried adding a class with .addClass() and defining it in my .css sheet.

function blueifyScreenshot(id) {

console.log("#" + id);
var updated_id = "#" + id;

// this isn't changing anything either..
$(updated_id).addClass('selected_screenshot');

}
/* CSS */

.selected_screenshot {

    border-color: #0614d1 !important;
    cursor : pointer;
    transform: scale(1.1); 
    box-shadow: 0 0 12px #0614d1; 
}

I have even tried updating the style attribute of the image with the .attr() method.

function blueifyScreenshot(id) {

console.log("#" + id);
var updated_id = "#" + id;

// and THIS wont change anything.
$(updated_id).attr('style', "height: auto; border-style: solid; border-width: 5px; border-color: #0614d1; max-width: 10%; margin-right: 10px; margin-bottom: 10px;");

}

None of this has worked and my screenshots do not change when I click on them. I've tried browsing through StackOverflow to see if other people had this issue and it looks like everyone was able to resolve their problems through the methods I've tried.

Anyone able to assist, or maybe spot something I have not?

Upvotes: 2

Views: 77

Answers (1)

epascarello
epascarello

Reputation: 207521

Just reference the element

onclick="blueifyScreenshot(this)"

and toggle a class

function blueifyScreenshot(elem) {
  elem.classList.toggle('active')
}

Personally I would just use a dom method

var images = [
  'http://placekitten.com/100/300',
  'http://placekitten.com/200/200',
  'http://placekitten.com/200/300',
  'http://placekitten.com/100/200'
]

var outElem = document.getElementById('out')

images.forEach(function(src) {
  var img = document.createElement('img');
  img.className = 'example'
  img.src = src
  img.addEventListener('click', function() {
    this.classList.toggle('selected')
  })
  outElem.appendChild(img)
})
img.example {
  height: auto;
  border-style: solid;
  border-width: 5px;
  border-color: #1ebe1e;
  max-width: 10%;
  margin-right: 10px;
  margin-bottom: 10px;
}

img.example.selected {
  border-color: #0614d1 !important;
  cursor: pointer;
  transform: scale(1.1);
  box-shadow: 0 0 12px #0614d1;
}
<div id="out"></div>

Upvotes: 2

Related Questions