Javascript | Change src to data-attribute active

Question

I am trying to change the selection of a image based on a data attribute of 'data-active'.

When the data-active is equal to true, then it will change the image to something that indicates that the platform has been selected and all of the others deselect showing only one.

The problem I currently have is that the image is being passed the current platform that is clicked so it is changing the deselected images to the current image clicked on disabled so the images become out of order.

You can see this here... https://miotks.co.uk/register (I have a self assigned certificate)

This is my current code that I have for it...

function checkState(obj, platform) {
var checkActive = document.querySelectorAll("[data-active='true']");
var alreadyActive = checkActive.length;

if (alreadyActive >= 2) {
    for (var i = 0; i < checkActive.length; i++) {

        // Reset the images to the default when all changed to false.
        checkActive[i].setAttribute('data-active', 'false');
        checkActive[i].setAttribute('src', '/images/' + platform + '-noselect.png' );

        obj.setAttribute('data-active', 'true');
        obj.setAttribute('src', '/images/' + platform + '-select.png');
    }
} else {

}}

It judges the length of how many elements are selected and have 'true' once this exceeds or is equal to 2, then they all get reset and should change to the current one.

This is how I am calling the function on the click event...

checkState(this, 'steam');

That URL returns a 403 error.

JLRishe
– JLRishe

2017-04-09 20:26:01 +00:00
Commented Apr 9, 2017 at 20:26 — JLRishe
– JLRishe, Commented Apr 9, 2017 at 20:26
@JLRishe try now, sorry.

cmiotk
– cmiotk

2017-04-09 20:27:15 +00:00
Commented Apr 9, 2017 at 20:27 — cmiotk
– cmiotk, Commented Apr 9, 2017 at 20:27

JLRishe · Accepted Answer · 2017-04-09 20:31:48Z

1

It looks like you can just change the -select to -noselect in each image's url:

function checkState(obj, platform) {
    var checkActive = document.querySelectorAll("[data-active='true']");
    var alreadyActive = checkActive.length;

    if (alreadyActive) {
        for (var i = 0; i < checkActive.length; i++) {
            // Reset the images to the default when all changed to false.
            checkActive[i].setAttribute('data-active', 'false');
            checkActive[i].src = checkActive[i].src.replace('-select', '-noselect');
        }
    }

    obj.setAttribute('data-active', 'true');
    obj.src = obj.src.replace('-noselect', '-select');
}

edited Apr 9, 2017 at 20:31

answered Apr 9, 2017 at 20:30

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

6 Comments

cmiotk Over a year ago

But then when I click on the other images, it doesn't deselect the images that are not currently active.

JLRishe Over a year ago

@cmiotk If I have understood your question, I believe you want to deselect all images other than the one that was clicked. Am I mistaken?

cmiotk Over a year ago

That is correct, but using the code that you provided does not achieve this. Instead it just carries on setting the images as the active state rather than the deactivated state

JLRishe Over a year ago

@cmiotk Please try it again. I have edited it since I originally posted it. I tried it on your site and it works.

cmiotk Over a year ago

Thank you very much, that works a charm! I will accept as answer when I can. Do you mind explaining how this works?

|

Collectives™ on Stack Overflow

Javascript | Change src to data-attribute active

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related