Checkbox:checked order with an Array.prototype.forEach.call push,

Question

I'm begining with Javascript, its my third project with it (first is a html5 canvas game tutorial i followed, and second a little salary calculator i made in a day.

Now i'm working on a Stargate SG1 activable door.

I'm facing a problem with a function that i used to control the adress for the "spinning door", that i found here : How to check multiple checkboxes with JavaScript?

Problem is that the values of the checkboxes, as i understand it, are .push every time a new value is entered, but the array containing all the adress set them in an numerical order.

So if i enter 4-2-3-1 i got : 1-2-3-4 and because the rotating part is fixed, the symbols according to the checkbox value, never end to the position he should.

I tryed others array method, but i didnt figure how to stop array to add values in numerical order.

Here is the code, if someone figure out where i might do some changes :

function ChoixCoord(checkboxClass) {
var checkboxes = document.querySelectorAll('input[class="' + checkboxClass + '"]:checked'),
values = [];

Array.prototype.forEach.call(checkboxes, function(el) {
values.push(el.value);
});

	Coord1 = values[0];// These are values used to give position to rotating door, so symbols matchs the chevrons
	Coord2 = values[1];
	Coord3 = values[2];
	Coord4 = values[3];
	Coord5 = values[4];
	Coord6 = values[5];
	Coord7 = values[6];

alert(Coord1 + Coord2 + Coord3 + Coord4 + Coord5 + Coord6 + Coord7); // This is for test purpose
	
  
  


};

<!DOCTYPE html>
<html>
	<head>
	<title>Stargate</title>
	<link rel='stylesheet' type='text/css' href='style.css'/>
        <script type='text/javascript' src='js.js'></script>
	</head>
<body scroll="no" style="overflow:hidden">


<form class="panneauDHD" name="dhd">
<input type="checkbox" class="checkSymbole" id="s1" name="checkSymbole1" value="1" onClick="return KeepCount()"></input><label class="s1" for="s1"></label>
<input type="checkbox" class="checkSymbole" id="s2" name="checkSymbole2" value="2" onClick="return KeepCount()"></input><label class="s2" for="s2"></label>
<input type="checkbox" class="checkSymbole" id="s3" name="checkSymbole3" value="3" onClick="return KeepCount()"></input><label class="s3" for="s3"></label>
<input type="checkbox" class="checkSymbole" id="s4" name="checkSymbole4" value="4" onClick="return KeepCount()"></input><label class="s4" for="s4"></label>
<input type="checkbox" class="checkSymbole" id="s5" name="checkSymbole5" value="5" onClick="return KeepCount()"></input><label class="s5" for="s5"></label>
<input type="checkbox" class="checkSymbole" id="s6" name="checkSymbole6" value="6" onClick="return KeepCount()"></input><label class="s6" for="s6"></label>
<input type="checkbox" class="checkSymbole" id="s7" name="checkSymbole7" value="7" onClick="return KeepCount()"></input><label class="s7" for="s7"></label>
<input type="checkbox" class="checkSymbole" id="s8" name="checkSymbole8" value="8" onClick="return KeepCount()"></input><label class="s8" for="s8"></label>

<input type="button" id="lancement" value="Lancer la mission" onClick="ChoixCoord('checkSymbole');">

</form>

			
	</body>
</html>

Thank you in advance for any help !

Are you looking for the JavaScript Array sort() Method? values.sort(); — Esko
– Esko, Commented May 10, 2016 at 19:06
Or are you trying to push new items to the front? If so then instead of .push use .unshift with values.unshift(el.value); — Esko
– Esko, Commented May 10, 2016 at 19:10
@Esko i tryed .unshift, but it has the same effect as .push. For sort() for what i readed on microsoft help, the sort method work if you need numerical order, or alphabetical, not a variable order that depends on user inputs. — Al D
– Al D, Commented May 10, 2016 at 23:06

homer · Accepted Answer · 2016-05-10 19:32:58Z

0

I think you need to think about different approach.

Remove onClick function form the checkboxes and button then create function which will add checkboxes to the array in order as they are being checked

var checked = [];

$('.checkSymbole').change(function(e) {
    var checkbox = $(this);
    var value = $(this).val();
    var index;

    /*
     * if checkbox is checked add to array 
     * else remove it
     */
    if (checkbox.is(':checked')) {
        checked.push(value);
    } else {
        index = checked.indexOf(value);  // find index of value in array
        checked.splice(index, 1); // remove it
    }

    console.log(checked); // you can see how values in array are removed/ added
});

I hope it will help

answered May 10, 2016 at 19:32

homer

2432 silver badges10 bronze badges

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

1 Comment

Al D Over a year ago

Thank you, it was what i wanted to do, even if i didnt wanted to use Jquery, but it work well. Now i have juste to figure how to limit the array and add all the code already written to rotate the thing, Thank you alot !

Collectives™ on Stack Overflow

Checkbox:checked order with an Array.prototype.forEach.call push,

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related