restrict the number of focus elements that can be selected-CodePudding

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 >
  <div  id="my_dataviz">

  </div>
  <div >
    <input  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;
    }

CodePudding user response：

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 >
        <div  id="my_dataviz">

        </div>
        <div >
            <input  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>

CodePudding user response：

Within your buttons' click event listeners, get and count the parent element's selections:

evt.target.parentNode.querySelectorAll(".btn.button-focus").length

...and if less than three, allow selection:

if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {
    // ...

But first check to see if currently deselecting:

if ( this.classList.contains("button-focus") ) {
    // ...
}
else if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {
    // ...
}

...and if not deselecting and 3 already selected display alert:

if ( this.classList.contains("button-focus") ) {
    // ...
}
else if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {
    // ...
}
else {  alert('too many selections'); }

For example:

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(evt) {
      console.log("Clicked Button: "   index);

      let isPresent = true;
      
      // deselect
      if ( this.classList.contains("button-focus") ) {
        isPresent = true;
      }
      
      // select if less than 3 selected
      else if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {

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

      }
      
      // alert it not deselecting and 3 are selected
      else { alert("Maximum selection is 3. Remove one before selecting another."); }

      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 >
  <div  id="my_dataviz">

  </div>
  <div >
    <input  type="button" value="Select" />
  </div>
</div>

CodePudding user response：

You can use forEach() and Array.from to get this job done. For each button presented, disable every button when any button is clicked 3 times. Incrementing the SelectCount variable three times gives the signal.

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.setAttribute("class", "btn")
  button.classList.add("btn")
  button.id = element;
  button.value = element;
  button.type = "button";
  button.setAttribute("onclick", "check();");
  
  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);
}

var SelectCount=0;


function check() {
    
SelectCount  = 1
if (SelectCount > 2) {
        Array.from(document.querySelectorAll(".btn")).forEach(function(btn) {
            
            console.log("disabled "   btn.value)
            btn.setAttribute("disabled", true)

        })


}}

: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;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div >
  <div  id="my_dataviz">

  </div>
  <div >
    <input  type="button" value="Select" />
  </div>
</div>

    </body>
</html>

Hope this helped.