Changes of values in array are not detected

Question

Here's my js code:

    // at first the three buttons have value 1
    var clicks = [1,1,1];

    // if (at least one button has value 2) {"button-next" = enabled}
    if (clicks.some(x => x == 1)) {
        document.getElementById("button-next").disabled = true;
    } else {
        document.getElementById("button-next").disabled = false;
    }

If at least one of the three values is 2, button-next must be enabled.

With jQuery I managed to change the variabales to 2 at the first click (and the opacity to 1) and back to 1 at the second click (and the opacity back to 0.5):

$(document).ready(function(){
    // BUTTON 1
    $("#button1").click(function(){
        if (clicks[0] == 1) {
            jQuery("#button1").css('opacity', '1');
            clicks[0] = 2;
        } else {
            jQuery("#button1").css('opacity', '0.5');
            clicks[0] = 1;
        }
    });

    // BUTTON 2
    $("#button2").click(function(){
        if (clicks[1] == 1) {
            jQuery("#button2").css('opacity', '1');
            clicks[1] = 2;
        } else {
            jQuery("#button2").css('opacity', '0.5');
            clicks[1] = 1;
        }
    });

    // BUTTON 3
    $("#button3").click(function(){
        if (clicks[2] == 1) {
            jQuery("#button3").css('opacity', '1');
            clicks[2] = 2;
        } else {
            jQuery("#button3").css('opacity', '0.5');
            clicks[2] = 1;
        }
    });
});

When I click on a button once the value changes, but the button-next remains disabled. It looks like the changes are not detected. I tried to change it manually like this:

var clicks = [1,2,1];

And I proved that these lines work:

    if (clicks.some(x => x == 1)) {
        document.getElementById("button-next").disabled = true;
    } else {
        document.getElementById("button-next").disabled = false;
    }

Because at that point button-next was enabled back. I don't know how to fix it. Do you have any idea?

pacifier21 · Accepted Answer · 2017-05-20 23:04:12Z

1

It seems like you can do this all with some css and javascript together. Unless you have other code (not in your example) that is specific to each button, you could try something like this:

function updateNextBtn() {
    if ($('.btn-clicked').length === 0) {
        $('#button-next').attr('disabled', 'disabled');
    } else {
        $('#button-next').removeAttr('disabled');
    }
};

$(document).ready(function(){
    // BUTTON 1
    $(".btn").click(function() {
        // Add or remove btn-clicked class
        $(this).toggleClass('btn-clicked');
        updateNextBtn();
    });
});

.btn {
  opacity: 0.5;
}

.btn.btn-clicked {
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" class="btn">B1</button>
<button id="button2" class="btn">B2</button>
<button id="button3" class="btn">B3</button>
<button id="button-next" disabled="disabled">Next</button>

answered May 20, 2017 at 23:04

pacifier21

8131 gold badge5 silver badges13 bronze badges

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

2 Comments

Werl_ Over a year ago

What does $('.btn-clicked').length === 0 mean?

pacifier21 Over a year ago

The first part is a jquery selector: $(.btn-clicked'). This searches the document for all elements that have the "btn-clicked" class. This class is added to (or removed from if it already had the class) the buttons when clicked (using "toggleClass"). The selector will return something that is array-like, so it will have a "length" property that indicates how many elements were found with the ".btn-clicked" class. This way, we can find out if any buttons had been clicked. If none are clicked, $('.btn-clicked').length === 0 will evaluate to true.

Jonathan Lonowski · Accepted Answer · 2017-05-20 23:19:55Z

The condition in the snippet doesn't really align with the condition you've stated needing:

If at least one of the three values is 2, button-next must be enabled.

.some() won't return false until the predicate returns false for every element.

To match your stated condition, the code should compare x == 2 and swap the disabled values being set since the condition is now reversed:

if (clicks.some(x => x == 2)) {
    document.getElementById("button-next").disabled = false;
} else {
    document.getElementById("button-next").disabled = true;
}

Though, a simpler change could be to use .every() instead of .some().

While all clicks are 1, button-next is disabled.

if (clicks.every(x => x == 1)) {
// the rest as-is

A brief look at each:

[1, 1, 1].some(x => x == 1) // true (all are 1)
[1, 2, 1].some(x => x == 1) // true (1st and 3rd are 1, that's still some)
[2, 2, 2].some(x => x == 1) // false (none are 1)

[1, 1, 1].some(x => x == 2) // false (none are 2)
[1, 2, 1].some(x => x == 2) // true (2nd is 2)
[2, 2, 2].some(x => x == 2) // true (all are 2)

[1, 1, 1].every(x => x == 1) // true (all are 1)
[1, 2, 1].every(x => x == 1) // false (2nd is not 1)
[2, 2, 2].every(x => x == 1) // false (none are 1)

Side note

The snippet can be shortened with the if..else removed since .some() and .every() already provides a boolean value.

Here's the equivalent for each of the above snippets:

document.getElementById("button-next").disabled = !clicks.some(x => x == 2);

document.getElementById("button-next").disabled = clicks.every(x => x == 1);

Collectives™ on Stack Overflow

Changes of values in array are not detected

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related