restrict the number of focus elements that can be selected

June 12, 2022

Currently my code allows the user to select as many options as they like.
I need to restrict this to just 3 options.
The user needs to be able to deselect an option if they change their mind but a maximum of 3 options is the limit.

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;

array.forEach(element => {
  var button = document.createElement("button");
  button.className = "btn";
  button.id = element;
  button.value = element;
  button.type = "button";
  var text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn");

for (var i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);

      let isPresent = false;

      this.classList.forEach(function(e, i) {
        if (e == "button-focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      if (isPresent) {
        this.classList.remove("button-focus");
      } else {
        this.classList.add("button-focus");
      }
    });
  })(i);
}

:root {
  --primary_orange: #fea501
}

;
.my_dataviz {
  width: auto;
  height: 500px;
  margin-top: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.my_dataviz button {
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 120px;
  background-color: Transparent;
  -webkit-tap-highlight-color: transparent;
  background-repeat: no-repeat;
  border: none;
  letter-spacing: 1.6px;
  margin: 10px;
  border: 1px solid transparent;
}

.my_dataviz button:hover {
  box-sizing: border-box;
  background-color: var(--primary_orange);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.btn.button-focus {
  background-color: var(--primary_orange);
  color: var(--dark);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.modal-footer .modal-btn {
  width: 80px;
  height: 25px;
  border-radius: 5px;
  align-items: center;
  Margin: 30px;
}

<div class="modal-style">
  <div class="my_dataviz" id="my_dataviz">

  </div>
  <div class="modal-footer">
    <input class="modal-btn" type="button" value="Select" />
  </div>
</div>

I have tried using the following code snippet but i need another snippet of code to go with it…what am I missing?

var SelectCount=0;
if (SelectCount < 3) {
        
        SelectCount+=1;
    }

>Solution :

Try this, it basically checks the selected count and uses document.querySelectorAll() to enable or disable all the buttons.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --primary_orange: #fea501
        }

        ;

        .my_dataviz {
            width: auto;
            height: 500px;
            margin-top: 15px;
            margin-bottom: 12px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-around;
        }

        .my_dataviz button {
            font-size: 16px;
            display: flex;
            justify-content: center;
            width: 120px;
            background-color: Transparent;
            -webkit-tap-highlight-color: transparent;
            background-repeat: no-repeat;
            border: none;
            letter-spacing: 1.6px;
            margin: 10px;
            border: 1px solid transparent;
        }

        .my_dataviz button:hover {
            box-sizing: border-box;
            background-color: var(--primary_orange);
            font-weight: bold;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .btn.button-focus {
            background-color: var(--primary_orange);
            color: var(--dark);
            font-weight: bold;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .modal-footer .modal-btn {
            width: 80px;
            height: 25px;
            border-radius: 5px;
            align-items: center;
            Margin: 30px;
        }
    </style>
</head>

<body>

    <div class="modal-style">
        <div class="my_dataviz" id="my_dataviz">

        </div>
        <div class="modal-footer">
            <input class="modal-btn" type="button" value="Select" />
        </div>
    </div>


    <script>

        const container = document.getElementById('my_dataviz');

        const array = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]

        let identifier = 0;
        let SelectCount = 0;

        array.forEach(element => {
            const button = document.createElement("button");
            button.className = "btn";
            button.id = element;
            button.value = element;
            button.type = "button";
            const text = document.createTextNode(element);
            button.appendChild(text);
            container.appendChild(button);
        });

        let btn = document.getElementsByClassName("btn");

        for (let i = 0; i < btn.length; i++) {
            (function (index) {
                btn[index].addEventListener("click", function () {
                    console.log("Clicked Button: " + index);

                    let isPresent = false;

                    this.classList.forEach(function (e, i) {
                        if (e == "button-focus") {
                            isPresent = true;
                        } else {
                            isPresent = false;
                        }
                    });

                    if (isPresent) {
                        this.classList.remove("button-focus");

                        SelectCount -= 1;
                        document.querySelectorAll('.btn').forEach(item => {
                            if (!item.classList.value.includes('button-focus')) item.disabled = false
                        })

                    } else {
                        this.classList.add("button-focus");

                        SelectCount += 1;
                        if (SelectCount > 2) {
                            document.querySelectorAll('.btn').forEach(item => {
                                if (!item.classList.value.includes('button-focus')) item.disabled = true
                            })
                        }

                    }
                })
            })(i)
        }
    </script>

</body>
</html>