CODEWITHSUNDEEP
javascriptjqueryhtmlcss
O Lopez
O Lopez

Reputation: 33

Don't seem to get $().attr('src') to do its job

First post here, so please be gentle ;-)

I've been learning coding over the last couple of weeks by making a dummy page, and been implementing what i learn on it incrementaly as i progress, hence it's a mixed bag where the functionality/code is according to when i wrote it, based on pure html/CSS, inline javascript, external javascript, and finally jquery.

So i mostly wrapped it up and i'm now cleaning up the mess, and part of my mission is to cull functions and lines of codes, and in one of them i'm kind of stuck.

The before was 30 buttons calling to 30 different functions onclick like so:

function cell3() {

         document.getElementById('base3').src='images/1/3/' + x + '.png';
         document.getElementById('base3b').src='images/1/3/' + x + '.png';
         document.getElementById('v2base3').src='images/2/3/' + x + '.png';
         document.getElementById('v2base3b').src='images/2/3/' + x + '.png';
         document.getElementById('cell3').style.backgroundColor= x ;
}

Where a global variable (x) defines the folder paths for images to replace the images within some divs when clicking the button (cell3). It also changes the bGroung color of it. Sorry if the naming is a bit confusing...

So i'm removing all 30 functions and the 30 onclick calls with this bit of jquery:

$('button').click(function(){

  var eyeD = $(this).attr("id"); 
  var newURLa = 'images/1/' + eyeD + '/' + x + '.png';
  var newURLb = 'images/2/' + eyeD + '/' + x + '.png';

    $('base' + eyeD).attr('src', newURLa);
    $('base' + eyeD + 'b').attr('src', newURLa);
    $('v2base' + eyeD).attr('src', newURLb);
    $('v2base' + eyeD + 'b').attr('src', newURLb);
    $(this).css( "background-color", x );
    document.getElementsByid('check').innerhtml = eyeD;

});

For that to 'work' i changed the button's names from 'cell1', 'cell2, etc. to '1', '2', etc.

Now the thing is, when clicking on the buttons the var 'eyeD' takes the value from the button ok. ('1', '2', etc.). The elements ID's are formed correctly ('base1', 'base2'... 'base1b', base2b'...), and the URL's are formed correctly. (The last line in the code is a p element that displays values so i could try to troubleshoot it) The background color also changes as expected. But the images do not get replaced.

Tried adding commas to the resulting URL's in case it was a syntax issue, but nothing happens. i even went freestyle and tried it with the =url() on it, different commas in different places, etc. So basically scraping the barrel here. Also wrote a url without variables to see if that would work, but still nothing. Also getting no errors when looking at the console.

It's probably a basic 'DOH!' thing, but right now i have a mental block...

Also, is there a way to keep the original naming and just retrieve the numbering part of the ID's? Thought about using the [4] identifier to get the 5th digit, but that won't work when running double digit numbers. (10, 11, etc)

Thanks!

Upvotes: 0

Views: 63

Answers (3)

O Lopez
O Lopez

Reputation: 33

Problem solved!! It was indeed calling the id with the hash, but also it has to be called with double quotation marks. Single inverted commas won't work.

So the working format is

$("#v2base" + eyeD + "b")

but it won't work like so

$('#v2base' + eyeD + 'b')

Thanks everyone, it's been emotional

Upvotes: 0

TheValyreanGroup
TheValyreanGroup

Reputation: 3599

Your jQuery lines accessing the elements are missing the # sign.

Change these...

$('base' + eyeD).attr('src', newURLa);

To this...

$('#base' + eyeD).attr('src', newURLa);

Also, your last line where you use plain JS, can be done in jQuery as well with less code.

document.getElementsByid('check').innerhtml = eyeD;

To...

$("#check").html(eyeD);

However, you should always use distinct ID's for elements. If you need to use multiple elements at the same time, use a class instead.

$(".check").html(eyeD);

Upvotes: 1

Ray
Ray

Reputation: 9684

You're grabbing an element incorrectly.

Either Grab an element by it's class name like so:

$('.v2base' + eyeD + 'b').attr('src', newURLb);

Or by its ID:

$('#v2base' + eyeD + 'b').attr('src', newURLb);

Upvotes: 0

Related Questions