Menu
Tic-Tac-Toe is the code I'm working on, but my question is just a general one. How can I go about checking one array of integers against one large array containing several sub-arrays of integers. I only want to find the numbers from 'sel' that appear in one of the arrays in 'combos'. So far I have tried to filter, find, indexOf, and map, but I never get the code to 'find' just the relevant numbers from 'sel'... I know I can I can use the following code to get the job done:
if(document.getElementById('1') &&
document.getElementById('2') &&
document.getElementById('3') == 'X'){
alert('You Win')}
but it seems redundant, and I would like to know the efficient way to solve this problem. Please don't suggest any Jquery, I am using Vanilla JS without any libraries. And please make sure you check both my question and the other author before marking mine as a duplicate, because I have researched this question for hours, and could not find one similar. If there is one, please point me in the right direction. I don't think the rest of my code is relevant, but if you would like to see it anyway, I will attach.
function play(player) {
var arr = [];
var player;
var computer;
var turn1 = ['X', 'O'];
var check = [];
var p = document.getElementById('page');
player = player.value;
p.innerHTML = 'You Will Play As' + '<br>' + player;
computer = turn1.filter(v => v !== player);
mouseD();
function mouseD() {
var div = document.getElementsByTagName('div');
arr = Array.from(div);
for (var i in arr) {
arr[i].onmousedown = function() {
var values = this.getAttribute('id');
if (check.indexOf(values) > -1) {
alert('select a different box');
} else {
this.innerHTML = player;
check.push(values);
}
}
arr[i].onmouseup = function() {
var temp = [];
var arr1 = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
for (var j in arr1) {
if (check.indexOf(arr1[j]) === -1) temp.push(arr1[j]);
}
for (j in check) {
if (arr1.indexOf(check[j]) === -1) temp.push(check[j]);
}
var some = Math.floor(Math.random() * temp.length);
var all = temp[some];
var vals = document.getElementById(all);
vals.innerHTML = computer;
check.push(all);
winner();
}
function winner() {
var combos = [
['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9'],
['1', '4', '7'],
['2', '6', '8'],
['3', '6', '9'],
['3', '5', '7'],
['1', '5', '9']
];
}
}
}
}.box {
display: inline-block;
width: 8%;
height: 100px;
background-color: lightblue;
margin-bottom: auto;
border: 5px slategray solid;
left: 0;
right: 0;
vertical-align: top;
text-align: center;
font-size: 40px;
}
section {
margin-top: 40px;
margin-left: 50px;
}<body>
<p id='page'>
<button class='button' id='X' value='X' onclick='play(this)'>X
</button>
<button class='button' id='O' value='O' onclick='play(this)'>O
</button>
</p>
<br>
<section>
<div id='1' class='box' value='1'>
</div>
<div id='2' class='box' value='2'>
</div>
<div id='3' class='box' value='3'>
</div>
</br>
<div id='4' class='box' value='4'>
</div>
<div id='5' class='box' value='5'>
</div>
<div id='6' class='box' value='6'>
</div>
<br>
<div id='7' class='box' value='7'>
</div>
<div id='8' class='box' value='8'>
</div>
<div id='9' class='box' value='9'>
</div>
</section>
</body>var combos =
[['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9'],
['1', '4', '7'],
['2', '6', '8'],
['3', '6', '9'],
['3', '5', '7'],
['1', '5', '9']];
var sel = ['1','2','6','8'];
988
asked Apr 25 '26 10:04
You can do this with some(), every() and indexOf() and it will return true/false as result.
var combos =
[['1', '2', '3'],
['4', '5', '6'],
['7', '8', '9'],
['1', '4', '7'],
['2', '6', '8'],
['3', '6', '9'],
['3', '5', '7'],
['1', '5', '9']];
var sel = ['1','2','6','8'];
var result = combos.some(function(ar) {
return ar.every(function(e) {
return sel.indexOf(e) != -1
})
})
console.log(result)Here is shorter version with ES6/ES7 using arrow functions and Array#includes
var result = combos.some((ar) => ar.every((e) => sel.includes(e)))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
