You are currently displaying the array of selected items. Just display the length instead.
You can just change
$("#select-result").text(liSelected.length === 0 ? "none" : liSelected.join(", "));
to
$("#select-result").text(liSelected.length === 0 ? "none" : (liSelected.length + ' out of 5'));
I’m trying to add a counter to this, so when a number is clicked, it should display “You’ve selected 1 out of 5” meaning the person has to select 5 numbers. But if the same number is clicked, it should deselect and then go back to “You’ve selected 0 out of 5”. So you could essentially click 1,5,7 but then it should display “You’ve selected 3 out of 5”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gaarith</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable li {
margin: 10px;
padding: 1px;
float: left;
width: 100px;
height: 80px;
font-size: 4em;
text-align: center;
}
.wrapper {
display: flex;
margin: auto;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content" text="car">1</li>
<li class="ui-widget-content" text="truck">2</li>
<li class="ui-widget-content" text="physics">3</li>
<li class="ui-widget-content" text="maths">4</li>
<li class="ui-widget-content" text="home automation">5</li>
<li class="ui-widget-content" text="car6">6</li>
<li class="ui-widget-content" text="car7">7</li>
<li class="ui-widget-content" text="car8">8</li>
<li class="ui-widget-content" text="car9">9</li>
<li class="ui-widget-content" text="car10">10</li>
<li class="ui-widget-content" text="car11">11</li>
<li class="ui-widget-content" text="car12">12</li>
</ol>
</div>
</div>
<script>
// this makes each box clickable and adds it to an array the title.
let liSelected = [];
$("document").ready(function() {
$(".ui-widget-content").on("click", function() {
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
removeItem(liSelected, $(this).attr('text'));
}else{
$(this).addClass('ui-selecting');
liSelected.push($(this).attr('text'))
}
$("#select-result").text(liSelected.length === 0 ? "none" : liSelected.join(", "));
});
// this checks if the existing title is in the array and then removes it
function removeItem(array, item){
for(var i in array){
if(array[i]==item){
array.splice(i,1);
break;
}
}
}
});
</script>
</body>
</html>
Can you make it more clear in your question what output you’re getting and compare it to what you’re expecting?