Find Matching numbers from 2 different arrays

Question

I'm making a Lotto game for school, I'm stuck at checking the matching numbers.

I've tried a nested for loop and although I can console.log out the matches, it gets overwritten in the next iteration of the loop and I don't understand how I can solve this.

These are my picked numbers, stored here.

myNumbers=[1,2,3,4,5,6,7]

These are the randomly drawn numbers

luckyNumbers=[35,3,17,26,21,9]

In this case there's a match for number 3. How do I check this so I can spit out my 2 different graphics, one for No match and one for Match?

for ( var i = 0; i < myNumbers.length; i++) {
    for ( var e = 0; e < luckyNumbers.length; e++) {

        if (myNumbers[i] == luckyNumbers[e]){
            matchingPairs.push(myNumbers[i]);
    document.getElementById("ball"+myCounter).src="img/ballCorrect"+myNumbers[i]+".svg";

        }
        else{
        document.getElementById("ball"+myCounter).src="img/ballIncorrect"+luckyNumbers[myCounter-1]+".svg";

        }
          document.getElementById("ball"+myCounter).style.display="inline";
    }
 }

Did you try [Array.prototype.includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) — caramba, Dec 10 '19 at 11:36
did you try array filter like `myNumbers.filter(value => luckyNumbers.includes(value))`? — Girish, Dec 10 '19 at 11:37
is this your requirement myNumbers=[1,2,3,4,5,6,7], luckyNumbers=[35,3,17,26,21,9], then matchingPairs=[3]? — Nitheesh, Dec 10 '19 at 11:37
Related: https://stackoverflow.com/questions/55549338/test-whether-all-array-elements-are-factors-of-a-number-return-inside-a-for-lo — Jonas Wilms, Dec 10 '19 at 11:39
The values in the arrays are not static, more for this example. like Bingo or whatever you'll pick 7 numbers and then 7 random ones are pulled out between 1-35. and Yes that is my problem with the nested loop overriding the previous itteration. This is 5th week in javascript in school so take it easy on me, I don't understand arrow functions yet, dumb it down for me if you can :) — MindGem, Dec 10 '19 at 13:53

score 0 · Answer 1 · answered Dec 10 '19 at 12:03

0

Below snippet will get you the array of all the matching numbers with better performance.

const myNumbers=[1,2,3,4,5,6,7]
const luckyNumbers=[35,3,17,26,21,9]

const matching = getMatching(myNumbers, luckyNumbers)

function getMatching(myNum, luckyNum) {
    const luckySet = new Set(luckyNum)
    return myNum.filter(n => luckySet.has(n))
}

PS: I could not understand what exactly you are doing for graphics, but something similar to below snippet should do the trick.

const myNumbers=[1,2,3,4,5,6,7]
const luckyNumbers=[35,3,17,26,21,9]

const luckySet = new Set(luckyNum)
myNumbers.forEach(num => {
    if(luckySet.has(num)) {
        // found matching ::render Graphic 1
    } else {
        // Not matching :: render Graphic 2
    }
})

answered Dec 10 '19 at 12:03

Sujeet Jaiswal

1,071
7
12

Here's an UPDATE. myNumbers=[1,2,3,4,5,6,7]; randomlyPickedNumbers=[17,4,34,26,2,13,15]; function compare(arr1,arr2){ final={}; arr1.forEach((e1)=>arr2.forEach((e2)=> { //If there's a match I want to display a pink ball. if(e1 === e2){ final[e1]=final[e1]||"match"; document.getElementById("ball"+().src="img/ballCorrect"+(1)+".svg"; } //If no match, then display a blue ball. else{ final[e1]=arr2[e1-1]||0; document.getElementById("ball"+(myCounter+1)).src="img/ballIncorrect"+(1)+".svg"; } })); – MindGem Dec 12 '19 at 10:32
So I can definitely store my matched numbers in this object, however they are for some reason stored as the keys and not the values of the keys which I don't know how to correct. but my main problem as from stat, I can't push out those pink and blue balls correctly. After each iteration I guess they override what I did the previous loop? – MindGem Dec 12 '19 at 10:33

score 0 · Answer 2 · answered Dec 10 '19 at 12:05

0

You can get matched balls number and then can run an iteration as following.

let myNumbers=[1,2,3,4,5,6,7];
let luckyNumbers=[35,3,17,26,21,9];

let commons = myNumbers.filter((element)=>{ return (luckyNumbers.indexOf(element)>-1);})


for (let itr = 0; itr < myNumbers.length; itr++) {


if (commons.include(myNumbers[itr])){
             document.getElementById("ball"+itr).src="img/ballCorrect"+myNumbers[itr]+".svg";

        }
        else{
        document.getElementById("ball"+itr).src="img/ballIncorrect"+luckyNumbers[itr]+".svg";

        }
          document.getElementById("ball"+itr).style.display="inline";

 }

answered Dec 10 '19 at 12:05

iatsi

151
1
10

Thanks for all the replies, I'm overwhelmed, I didn't think there was so much action here and people willing to help. So...since I cant do line break in my reply this will be a wall of text. Thank you iatsi...this is really a step forward :) There's one thing though, for some reason the "matching ball" bounce out another ball..or something. See this image here. The console log shows the luckyNumbers, but the graphic blue balls shows 6 twice. Why do you think that is? http://www.graffiticreator.net/orders/test.jpg – MindGem Dec 10 '19 at 13:45
Hey @MindGem, can you please let me know, which array are you using to print the row "23 28 6 12 24 6 34" ? – iatsi Dec 11 '19 at 06:13
iatsi. Would it be easier to look at the files? It's not much code and I've commented where my problem is. Here's the zip gunnelwigen.se/svg/lotto.zip – MindGem Dec 12 '19 at 11:16

score 0 · Answer 3 · answered Dec 10 '19 at 12:35

<body>
    <div id=firstRow></div>
    <div id=secondRow></div>

<script>
    myNumbers=[1,2,3,4,5,6,7]
    luckyNumbers=[35,0,17,0,21,9]
    let numbers = document.getElementById('firstRow')
    let luckyNum = document.getElementById('secondRow')
    let numbersHtml = ''
    let luckyNumHtml = ''
    myNumbers.forEach(el => {
        numbersHtml+= `<div class= "nums">${el}</div>`
        luckyNumbers.forEach(num => {
            if(el === num){
                luckyNumHtml+= `<div class= "nums">${num}</div>`
            }
        })
    })

    numbers.innerHTML= numbersHtml
    luckyNumHtml.length !==0 ? luckyNum.innerHTML = luckyNumHtml : luckyNum.innerHTML = 'No match found'
</script>

<style type="text/css">
    #firstRow, #secondRow{
        display: flex;
        flex-direction;: row;
    }
    .nums{
        border: 1px solid black; 
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 20px
    }
</style>
</body>

Here's an UPDATE. myNumbers=[1,2,3,4,5,6,7]; randomlyPickedNumbers=[17,4,34,26,2,13,15]; function compare(arr1,arr2){ final={}; arr1.forEach((e1)=>arr2.forEach((e2)=> { //OM DET ÄR EN MATCH!!! if(e1 === e2){ final[e1]=final[e1]||"match"; //document.getElementById("ball"+().src="img/ballCorrect"+(1)+".svg"; } //OM DET INTE är en MATCH... else{ //final[e1]=arr2[e1-1]||0; // document.getElementById("ball"+(myCounter+1)).src="img/ballIncorrect"+(1)+".svg"; } })); — MindGem, Dec 12 '19 at 10:24
If you want to get object with key and value of matched numbers, I think you should do it like that: final[e1]=e2. And i don't understand what are you doing here: final[e1]=arr2[e1-1](here you try to find element of arr2 by it's number not index. If you want to minus 1 from that number, you should add in forEach index and do it like this arr2[index]-1) — Maksym Popov, Dec 13 '19 at 12:14

Find Matching numbers from 2 different arrays

3 Answers3