Javascript comparison array

Question

Javascript comparison array

Someone made a script comparison for me, but it works as it should, because I was a bit unclear, the code does not completely do as I like.

Please take a look at this site, it will explain more than a thousand words

The function of this website checks the lotto / bingo numbers, every day of the draw (1 and 2) should be compared with all the people who play. Some of the numbers are green, but not all numbers are green, which should be green, because they correspond to some numbers in the player list. Again, this was my own mistake, because I was not clear enough. Can someone please tell me which part should be replaced or edited to check all the numbers inside DRAW var, instead it only checks the last added var DRAW?

http://www.coldcharlie.nl/lotto/

This is part of the function.

function checkArray(guesses, draw) {
    var results = {}
    for (var i = 0; i< guesses.length; ++i) {
        if (draw.picks[guesses[i]]) {
            results[guesses[i]] = 'win';
        } else {
            results[guesses[i]] = 'loss';
        }
    }
    return results;
}

function appendTo(elt, parent) {
    if (parent) {
        document.getElementById(parent).appendChild(elt);
    } else {
        document.body.appendChild(elt);
    }
}

function printResults(name, winloss, parent) {
    var resultElt = document.createElement('div');
    resultElt.appendChild(document.createElement('span'));
    resultElt.firstChild.appendChild(document.createTextNode(name));
    resultElt.firstChild.className='name';
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in winloss) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
        picks.lastChild.className = winloss[p];
    }
    resultElt.appendChild(picks);
    appendTo(resultElt, parent);
}

function printResultsFor(name, draw, parent) {
    printResults(name, checkArray(players[name], draw), parent);
}

function printDraw(which, draw, parent) {
    var drawElt = document.createElement('div');
    drawElt.className='draw';
    drawElt.appendChild(document.createElement('h3'));
    drawElt.lastChild.appendChild(document.createTextNode('Draw '+which));
    drawElt.lastChild.className='drawNum';
    drawElt.appendChild(document.createElement('div'));
    drawElt.lastChild.className='date';
    drawElt.lastChild.appendChild(document.createTextNode(draw.when));
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in draw.picks) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
    }
    drawElt.appendChild(picks);
    appendTo(drawElt, parent);
}

This is the HTML part.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: white;
        background-color: #333;
      }
      .name {
        color: white;
        font-weight: bold;
        margin-right: 0.5em;
      }
      .picks, .picks * {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .picks * {
        margin: auto 0.25em;
      }
      .win { color: lime; }
      .loss { color: red; }
      .drawNum, #Draws H3 {
          margin-bottom: 0;
      }
    </style>
    <script type="text/javascript" src="lotto.js"></script>
  </head>
  <body>
    <div id="Results"></div>
    <div id="Draws"></div>
    <script type="text/javascript">
    var players = {John: ["2","3","8","12","23", "37", "41", "45", "48"],
                   Michael: ["2","14","3","12","24", "37", "41", "46", "48"]};

    var draws = [ {when: 'Sat 08-08-2009',
                   picks:{2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1}},
                  {when: 'Sat 15-08-2009',
                   picks:{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}}];
    draws.last = draws[draws.length-1];

    for (name in players) {
      printResultsFor(name, draws.last, 'Results');
    }
    for (var i=0; i<draws.length; ++i) {
      printDraw(i+1, draws[i]);
    }
    </script>
  </body>
</html>

+1

javascript arrays compare

Chris Aug 18 '09 at 20:10

source share

1 answer

mkoryak · Accepted Answer · 2009-08-18T20:22:52+0000

I have another suggestion:

use jquery
generate html so that each player number has a range with a class that contains this number. for example, 37 will be written as<span class='pick37'>37</span>
get rid of the crazy logic of the array, just one cycle to set the colors of all classes matching the winning numbers to green.

edit: I looked at your problem. who ever came up with this implementation could not make it more complicated. I wanted to take a hit on your problem, but there is no good reason to try to work with this code when rewriting is easier / faster.

, , ?

edit2: , : : http://dogself.com/test.htm

, - .

<html>
<head>
<title>Bingo stuff</title>
<body>
<style type="text/css">
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: white;
        background-color: #333;
      }
      .name {
        color: white;
        font-weight: bold;
        margin-right: 0.5em;
      }
      .picks, .picks * {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .picks * {
        margin: auto 0.25em;
      }
      .win { color: lime; }
      .loss { color: red; }
      .drawNum, #Draws H3 {
          margin-bottom: 0;
      }
    </style>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
<div id="players"></div>
<div id="draws"></div>

<script type="text/javascript">
var players = {
                Joop   : ["6","8","16","18","26","28","32","36","38","41"],
                Marijke: ["7","10","14","18","24","29","30","34","39","40"],
                Michel : ["4","5","11","16","21","27","33","36","42","44"],
                Mario  : ["6","9","18","25","32","35","39","40","43","45"],
                Diana  : ["2","6","8","17","22","23","33","36","42","44"],
                Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
                Chris  : ["5","7","8","9","11","12","16","28","30","32"],
                Jeannette: ["1","2","4","7","8","11","13","28","30","32"],
                Wieger: ["1","2","3","7","10","13","14","22","23","27"],
                Anita: ["6","13","15","17","21","26","32","33","43","45"],
                Thea: ["1","3","5","7","10","17","19","20","22","38"],
                Danny: ["3","7","11","15","22","28","32","37","40","43"],
                Cindy: ["2","4","16","18","21","24","33","38","41","44"],
                Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
                Willem: ["3","9","17","21","27","33","35","39","41","42"]

              };

var draws = [ {
               when: 'Sat 08-08-2009',
               picks:[2, 5, 11, 16, 23, 45, 46]
              },
              {
               when: 'Sat 15-08-2009',
               picks:[1, 23, 11, 14, 23, 42, 46]
              }
            ];

var buildPlayers = function(){
    var cont = $("#players");
    for(player in players){
        var html = ["<div>","<span class='name'>"+player+"</span>", "<ol class='picks'>"];
        for(var i = 0; i < players[player].length; i++){
            html.push("<li class='loss pick_"+players[player][i]+"'>"+players[player][i]+"</li>");
        }
        html.push("</ol>","</div>");
        cont.append(html.join(""));
    }
};

var buildDraws = function(){
    var cont = $("#draws");
    for(var i = 0; i < draws.length; i++){
        var html = ["<div class='draw'>","<h3 class='drawNum'>Draw "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];
        for(var j = 0; j < draws[i].picks.length; j++){
            html.push("<li>"+draws[i].picks[j]+"</li>");
            showWin(draws[i].picks[j]);
        }
        html.push("</ol>","</div>");
        cont.append(html.join(""));
    }
};

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};

$(function(){
    buildPlayers();
    buildDraws();
});

</script>
</body>
</html>

Javascript comparison array

More articles: