img CSS will not update onclick via jQuery

Question

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?

well you probably want to add a space before the o in onclick and between your id and src attributes — epascarello
– epascarello, Commented Sep 11, 2019 at 14:50
You also define x inside the loop so you are only every going to get the last item to render. — epascarello
– epascarello, Commented Sep 11, 2019 at 14:55
Clarified. Thanks. I don't think there is an issue in my onclick attribute though because I know the function is being called. — Caladin00
– Caladin00, Commented Sep 11, 2019 at 14:57
Just to confirm, none of your image ids have spaces in them, right? — Lloyd Smith
– Lloyd Smith, Commented Sep 11, 2019 at 14:59
That's right. They have mutiple underscores, they have a .jpg attachment on the end... but there are no spaces. — Caladin00
– Caladin00, Commented Sep 11, 2019 at 15:05

epascarello · Accepted Answer · 2019-09-11 16:02:36Z

2

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>

edited Sep 11, 2019 at 16:02

answered Sep 11, 2019 at 15:07

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Caladin00 Over a year ago

I tried to reference the element as you did and set it toactive and made this little css block with this header.

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

It still isn't working though.

Caladin00 Over a year ago

Never mind! I ended up stylizing my screenshots so that when they are generated they have either a good_screenshot class or a bad_screenshot class. Then I made a third class to be activated on selection and used .toggle("selected_screenshot") as you suggested and it worked like a charm. Thanks for your easy and simple to understand suggestion!

Collectives™ on Stack Overflow

img CSS will not update onclick via jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related