If Statement not working correctly

[manoj2]

Hello all,

I’m currently creating a seating plan. User’s should be able to select up to 3 available tables. After 3 tables are selected, the user should not be able to select anymore.

At the moment, the user is able to select 4 tables, which I do not want. Also, when 4 tables are selected, the user cannot unselect these tables any longer. Whereas, when the condition hasn’t been met, users can unselect tables.

Things I’ve tried:

• Playing around with the logical operators.
• Putting the if statement in a function and using return

Here is a JSFiddle with the problem: https://jsfiddle.net/manoj1234/euamdpb3/2/

[ilenia]

document.getElementsByClassName('active').length <= 3 

here if the length is 3, you are allowing to add other to the array

if this is false you are not allowing to remove

you need to restructure your logic here

when a new table can be added, when it can’t?

when a table can be removed?

I will give you an help, as I don’t really want to do more than this

            availableTables[index].onclick = () => {
            
                if (document.getElementsByClassName('active').length < 3 ) {
                	availableTables[index].classList.add('active');
                  availableTables[index].onclick = () => {
                  	availableTables[index].classList.remove('active');
                  }
                }

            }

this will be able to add and then remove the .active class from a table, but you can’t add it again after that

you probably need to use addEventListener instead
see here

JavaScript onclick event works only once