wrong logo Jquery

I got a scoreboard that I'm working on almost done thank god but take a look two things are missing ScoreBoard

And also there is a ST Rams logo in the middle of row that says ball is on and rows for Down and Yards Well th ST Rams is just a imageholder for the team that HAS THE BALL PossID is a xml attribute that tells you which team has possession. So in this case instead of the ST Rams it would be Eagles or Packers as long as there PossID IS EQUAL TO TEAM id

here is code it is a little bloated I'm working on a leaner version. it's

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<style type="text/css">
.ballonyd {
	color: #FFF;
}
.centermid {
	text-align: center;
	vertical-align: middle;
}
.staduim {
	color: #FFF;
}
.awayscore {
	color: #FFF;
	font-size: 55px;
    font-weight: bold;
}
.homescore {
	color: #FFF;
	font-size: 55px;
    font-weight: bold;
}
.formatcellcenter {text-align: center;
	vertical-align: middle;
}
.rr {background-color: #FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var xmlPath = '.' //'/xml/nfl/scores/real';
        var xmlGameID = 'AB-3171_29'; 
		var PossID;
		var teamNames = {
    "079": "GIANTS",
    "068": "LIONS",
    "084": "49ERS",
    "063": "BEARS",
    "083": "CHARGERS",
    "085": "SEAHAWKS",
    "088": "REDSKINS",
    "061": "FALCONS",
    "062": "BILLS",
    "064": "BENGALS",
    "065": "RAVENS",
    "066": "COWBOYS",
    "067": "BRONCOS",
    "069": "PACKERS",
    "070": "TITANS",
    "071": "COLTS",
    "072": "CHIEFS",
    "073": "RAIDERS",
    "074": "RAMS",
    "075": "DOLPHINS",
    "076": "VIKINGS",
    "077": "PATRIOTS",
    "078": "SAINTS",
    "080": "JETS",
    "081": "EAGLES",
    "082": "STEELERS",
    "086": "CARDINALS",
    "087": "BUCS",
    "089": "PANTHERS",
    "090": "JAGUARS",
    "120": "BROWNS",
    "151": "TEXANS",
    "685": "A-F-C",
    "686": "N-F-C"
};
	$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
			
            d.find('Team').each(function(i,Team){
                var team=$(Team);
                var id = team.attr("ID").toLowerCase();
                var teamname = team.attr("name");
                var homeOrAway = team.attr("vh");
				var selector1 = (homeOrAway=="A") ? '#Visitor' : '#Hometeam' ;
                var selector2 = (homeOrAway=="A") ? '#VTeamname' : '#HTeamName' ;

                $(selector1).html(teamname);
                $(selector2).html(teamNames[id]);
                
                var d = $(data);
                d.find('Team').each(function(i,Team){
                   
				// var d = $(data);
              //  d.find('Team').each(function(i,Team){
                    if ($(Team).attr('vh') == "A") {
					 // var awayname =$(Team).attr('name'); 
         // var awayname = $(Team).attr('name');
                                        // var vs2 = VS1.attr('Score');
                                        $('#txtAway').html(teamname);
                        $('#imgVisitHelmet').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/'+$(Team).attr('ID')+".png");
 }
                })
                    
					 var VS1 = $(Team).find('Linescore');
         // var vs2 = VS1.attr('Score');
          $('#VS').html(VS1.attr('Score'));
		   if ($(Team).attr('vh') == "H") {
					$('#txthome').html(teamname);
                        $('#imgHomeHelmet').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/'+$(Team).attr('ID')+".png");

                   
					 var HS1 = $(Team).find('Linescore');
         // var hs2 = HS1.attr('Score');
          $('#HS').html(HS1.attr('Score')); 
		  
		  }
                });
          //  });
        } 
    });
});
     function loadData() {
  $.ajax({
    type: "GET",
    url:  xmlPath+"/"+xmlGameID+".xml",
    dataType: "xml",
    success: function(data) {
      var d = $(data);
      var Play = d.find('Play');
	  $('#Staduim').html($(Play).attr('Location'));
	  var inn = Play.attr('TimeLeft');
	   PossID = Play.attr('PossID');
                                $('#time').html(inn); // timeleft[inn]
                                var bo = Play.attr('BallYrd');
                                $('#ballon').html(bo); // ballyrd[bo]
                                var dn = Play.attr('ResultingDown');
                                $('#Down').html(dn); // resultingdown[dn]
                                $('#downX').html(dn);
                                var ydtogo = Play.attr('ResultingToGo');
                                $('#Ydstogo').html(ydtogo); // resultingtogo[ydtogo]
                                $('#yardX').html(ydtogo);
      d.find('Team').each(function(i,Team){
		//var vh = team.attr('vh'); // A or H...
        //  var sHomeOrAway = vh == 'H' ? 'home' : 'away';
		//$('#txt' + sHomeOrAway).html(team.attr('name'));  
        if ($(Team).attr('vh') == "A") {
			 var VS1 = $(Team).find('Linescore');
			 
			    
        var vs2 = VS1.attr('Score');
		 //$('#txtAway').html(awayname);
          	$('#VS').html(VS1.attr('Score'));
			$('#miniaway').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $(Team).attr('ID') + '.png');
		   $(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodA1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodA2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodA3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodA4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodA5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodA5').text($(this).attr('score'));
						}
					});
			 if ($(Team).attr('ID') == $(Play).attr('PossID')) {
				 
         $('#minipossid').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + PossID + '.png');
		 
         
     
			
         }  
        }
		 
		// d.find('Team').each(function(i,Team){
			  
        if ($(Team).attr('vh') == "H") {
			 var HS1 = $(Team).find('Linescore');
			 var homename =$(Team).attr('name');
         // var hs2 = HS1.attr('Score');
          $('#HS').html(HS1.attr('Score')); 
		//   $('#txtHome').html(homename);
         // var vs2 = VS1.attr('Score');
         $('#minihome').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $(Team).attr('ID') + '.png'); 	
		   $(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodH1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodH2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodH3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodH4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodH5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodH5').text($(this).attr('score'));
						}
					});
			if ($(Team).attr('ID') == $(Play).attr('PossID')) {
				
         $('#minipossid').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + PossID + '.png');
		  
			
		   
    
		
     
			
			}
        }
    // });
	 });
	  
	  // each
        // changed all below to just use the variables that contain the text directly, as the arrays do not exist and don't seem necessary in this situation
      
      var qtr = Play.attr('Quarter') ;
	  if (qtr == 4) {
		$('#Q').html("4th Quarter");  
	  } else if (qtr==3) {
		 $('#Q').html("3rd Quarter");
	 } else if (qtr==2) {
		 $('#Q').html("2nd Quarter");
		 } else if (qtr==1) {
		 $('#Q').html("1st Quarter");
		 } else {
							$('#Q').text("FINAL");
						$('#quarter').text("");
		 }
       // quarter[qtr]
     // ++counterXml;
    }  
  }); //ajax

  }
 
		</script>
</head>

<body>
<table width="700" border="0">
  <tr>
    <td bgcolor="#000000"><table width="100%" border="0">
      <tr>
        <td width="13%" height="150" class="centermid"><span class="rr"><img src="http://powerzsoftware.com/tsn/IMAGES/VistorHelmet.png" alt="" name="imgVisitHelmet" width="48" height="62" class="formatcellcenter" id="imgVisitHelmet"></span></td>
        <td width="13%" class="centermid"><span class="awayscore" id="VS">0</span></td>
        <td width="46%"><table width="100%" border="0">
          <tr bgcolor="#E1E1E1">
            <td width="12%"><div align="center" id="time"></div></td>
            <td width="36%"><div align="center" id="Q"></div></td>
            <td width="11%"><div align="center">1</div></td>
            <td width="10%"><div align="center">2</div></td>
            <td width="9%"><div align="center">3</div></td>
            <td width="11%"><div align="center">4</div></td>
            <td width="11%"><div align="center">OT</div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="http://powerzsoftware.com/tsn/nfl//miniLogos/074.png" alt="" name="miniaway" width="27" height="24" id="miniaway"></div></td>
            <td bgcolor="#FFCC66"><div align="left" id="txtaway"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA5"></div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="http://powerzsoftware.com/tsn/nfl//minilogos/071.png" alt="" name="minihome" width="25" height="22" id="minihome"></div></td>
            <td bgcolor="#FFCC66"><div align="left" id="txthome"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH5"></div></td>
          </tr>
        </table>
          <table width="100%" border="0">
            <tr>
              <td width="12%"><div align="center"><img src="http://powerzsoftware.com/tsn/nfl/minilogos/football.png" alt="" name="imgball" width="32" height="21" id="imgball3"></div></td>
              <td width="36%" bgcolor="#006633"><div align="center" class="ballonyd"><strong>Ball on the </strong></div></td>
              <td width="10%" bgcolor="#FFFF33"><div align="center" id="ballon"></div></td>
              <td width="11%" bgcolor="#000000"><img src="http://powerzsoftware.com/tsn/nfl/miniLogos/079.png" alt="" name="minipossid" width="27" height="24" id="miniaway2"></td>
              <td width="9%" bgcolor="#FFCC33"><div align="center" id="downX"></div></td>
              <td width="11%" bgcolor="#FF9900"><div align="center">&amp;</div></td>
              <td width="11%" bgcolor="#FFCC33"><div align="center" id="yardX"></div></td>
            </tr>
          </table>
          <p align="center"><span class="staduim"><strong id="Staduim">Staduim</strong></span></p></td>
        <td width="14%" class="centermid"><span class="homescore" id="HS">0</span></td>
        <td width="14%" class="centermid"><img src="http://powerzsoftware.com/tsn/IMAGES/VistorHelmet.png" alt="" name="imgHomeHelmet" width="61" height="78" id="imgHomeHelmet"></td>
      </tr>
      <tr>
        <td colspan="5"></td>
      </tr>
    </table></td>
  </tr>
</table>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();
//checkStatus();
}
</script>
</body>
</html>

Open in new window

Please Help with both issues. We had all this upgrade servers Firewall so now I have to post example on my website. I picked the NY Giants too see it automate but you knew that.
NFLGAME.zip
powerztomAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Robert SchuttConnect With a Mentor Software EngineerCommented:
Try the following, it seemed to me that the respective checks on PossID being equal to either team id could be taken out and the statement taken out of the each loop. Most important seemed the mismatch between name and id of the image, you can actually get rid of the names where you only use #id in css and jquery to access everything. Some more if/else constructions seemed unnecessary and I replaced those by creating selectors for the elements based on v/h. In the process, I shaved off about 100 lines. It's not always about code size but the way it was before made it all the more difficult to understand what's going on. Note that this could all be even smoother if you use consistent id's in the html, for example awayscore/homescore instead of VS/HS, even better maybe (because of the vh attribute containing A/H) scoreV/scoreA or something like that, then all those selectors become really simple and clear what they're for.
  $(document).ready(function(){
    $.ajax({
      type: "GET",
      url:  xmlPath+"/"+xmlGameID+ ".xml",
      dataType: "xml",
      success: function(data) {
        var d = $(data);

        d.find('Team').each(function(i,Team){
          var team = $(Team);
          var id = team.attr("ID").toLowerCase();
          var teamname = team.attr("name");
          var homeOrAway = team.attr("vh");

          var selector3 = (homeOrAway=="A") ? '#txtaway' : '#txthome' ;
          var selector4 = (homeOrAway=="A") ? '#imgVisitHelmet' : '#imgHomeHelmet' ;
          var selector5 = (homeOrAway=="A") ? '#VS' : '#HS' ;
          $(selector3).html(teamname);
          $(selector4).attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/' + team.attr('ID') + '.png');
          $(selector5).html(team.find('Linescore').attr('Score'));
        });
      }
    });
  });

  function loadData() {
    $.ajax({
      type: "GET",
      url:  xmlPath+"/"+xmlGameID+".xml",
      dataType: "xml",
      success: function(data) {
        var d = $(data);
        var Play = d.find('Play');
        $('#Staduim').html($(Play).attr('Location'));
        var inn = Play.attr('TimeLeft');
        PossID = Play.attr('PossID');
        $('#miniaway2').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + PossID + '.png');

        $('#time').html(inn);
        var bo = Play.attr('BallYrd');
        $('#ballon').html(bo);
        var dn = Play.attr('ResultingDown');
        //$('#Down').html(dn);
        $('#downX').html(dn);
        var ydtogo = Play.attr('ResultingToGo');
        //$('#Ydstogo').html(ydtogo);
        $('#yardX').html(ydtogo);

        d.find('Team').each(function(i,Team){
          var team = $(Team);
          var vh = team.attr('vh'); // A or H...
          var sHomeOrAway = vh == 'H' ? 'home' : 'away';
          $('#txt' + sHomeOrAway).html(team.attr('name'));

          $('#' + (vh == 'H' ? 'H' : 'V') + 'S').html(team.find('Linescore').attr('Score'));
          $('#mini' + sHomeOrAway).attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + team.attr('ID') + '.png');
          $('#period' + vh + Math.max(5, $(this).attr('Qtr'))).text($(this).attr('score'));
        }); // each Team

        var qtr = Play.attr('Quarter') ;
        if (qtr == 4) {
          $('#Q').html("4th Quarter");
        } else if (qtr==3) {
          $('#Q').html("3rd Quarter");
        } else if (qtr==2) {
          $('#Q').html("2nd Quarter");
        } else if (qtr==1) {
          $('#Q').html("1st Quarter");
        } else {
          $('#Q').text("FINAL");
        }
        // ++counterXml;
      }  
    }); //ajax
  }

Open in new window

0
 
powerztomAuthor Commented:
I  figured out the away team text but  I'm still having a issue with NY Giants logo again I want that to transform into either green bay or Philly based on the PossID VALUE THAT ID Identifies the team and team's logo. Please Help
0
 
powerztomAuthor Commented:
Rob You fixed it and cleaned up a mess. Thank You One thing happened the score for each individual quarter disappeared.

 $('#' + (vh == 'H' ? 'H' : 'A') + 'A').html(team.find('LineQuarter').attr('Score'));
          $('#mini' + sHomeOrAway).attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + team.attr('ID') + '.png');
          $('#period' + vh + Math.max(5, $(this).attr('Qtr'))).text($(this).attr('score'));
        }); // each Team

Open in new window


One thing when I use this following code else if ($(this).attr('Qtr') == "6") this allows Double Over Time. And this bloated amount of code works.

$(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodH1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodH2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodH3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodH4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodH5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodH5').text($(this).attr('score'));
						}
					});

Open in new window



I'm glad you couldn't sleep and woke up and did this. That was a cool surprise.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
powerztomAuthor Commented:
Actually my method brings up the Identical Line score for home and away. So now we have a situation? it's my programming style and your selectors for vh Right?
0
 
Robert SchuttSoftware EngineerCommented:
Hmm, I have removed the each for LineQuarter by mistake. I'll add it back in and test it better this time, then I'll post it again...
0
 
Robert SchuttSoftware EngineerCommented:
Besides the loop, the code needed to use min() instead of max(), that was a reasoning error on my part.

So in the code I posted line 57 (and in your post line 3) needs to be replaced by:
					$(Team).find('LineQuarter').each(function(){
            $('#period' + vh + Math.min(5, $(this).attr('Qtr'))).text($(this).attr('score'));
					});

Open in new window

The xml file contains only period 0 so testing has still been limited to that for now.

Note that in your code you test for Qtr 5 or 6 going into the same html element, that is the same in my code but does mean that you might lose information unless that is how the xml data works, OT being the last period that is played?
0
 
Robert SchuttSoftware EngineerCommented:
By the way, in the code you just posted, line 1 is different from my code! On purpose?
0
 
powerztomAuthor Commented:
Not on purpose  LineQuarter instead of Linescore Right ? My bad not you.
0
 
Robert SchuttSoftware EngineerCommented:
No, I'm talking about line 1 of the first code block.
0
 
Robert SchuttSoftware EngineerCommented:
you posted:
$('#' + (vh == 'H' ? 'H' : 'A') + 'A')

Open in new window

I posted:
$('#' + (vh == 'H' ? 'H' : 'V') + 'S')

Open in new window

Note that vh already contains H or A (despite the name), so if you have made html elements with id's HA and AA for score (where they were previously HS and VS) then you could just use
$('#' + vh + 'A')

Open in new window

Like I said before, it would actually be a great idea to give all your elements consistent id's, then all those "vh == 'H' ? ..." checks could be taken out, just using the vh and/or homeOrAway variables instead.
0
 
powerztomAuthor Commented:
$('#' + (vh == 'H' ? 'H' : 'A') + 'A').html(team.find('LineQuarter').attr('Score'));

 $('#' + (vh == 'H' ? 'H' : 'V') + 'S').html(team.find('Linescore').attr('Score'));

Again My Bad. Let me ask you would putting a 6 in place of 5 in

$(Team).find('LineQuarter').each(function(){
            $('#period' + vh + Math.min(5, $(this).attr('Qtr'))).text($(this).attr('score'));

would that write to last column and last two cells like the OT Column just in case the game went into double Overtime?
0
 
Robert SchuttSoftware EngineerCommented:
Well you can only put a 6 in there if the corresponding html elements exist. As the html was before, they didn't otherwise I would have thought it was a typo in the code. So that's not a real answer to your question but I can't answer that because it all depends on how you want to handle that situation if the current way, overwriting the existing value, is not correct.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.