The Backstory: I am looking to improve a Fantasy Football webpage by adding stats of the players in real-time. Let's assume we are using this page as a reference. For each player, it lists the position they play (i.e. QB, WR, etc) and also the team they play against.
My Current Code: @BrockAdams answered my question yesterday and was able to assemble a table that contained the team name, position, and the rank. Here is a sample of the table:
What I am looking to accomplish is lookup the rank in the table based on the opposing team and my players position and add it to the end of the string.
What I Have Done:
The string that contains my players position can be found using document.querySelectorAll('span[class="Fz-xxs"]')[#].innerText.split(" - ").slice(-1)[0]
where #
is between 0
and 33
The string that contains the opponents team can be found using document.querySelectorAll('a[class="F-reset"]')[#].innerText.split(" ").slice(-1)[0]
where #
is once again between 0
and 33
The Problem: What my question is, how can I modify my script to append the rank # to the end of the string based on my players position and the opposing team?
A small issue I found is that anytime a user loads the fantasy page, my script will re-fetch all the teams position + ranks even though they only change once a week. Is there a good method to store the values in the browser and have it update only once a week?
Here is a picture of what the final result should look like. This was from a script created last year but because Yahoo modified their site, the old script no longer works.
Edit: Here is a portion of the existing HTML code.
<td class="Ta-start player Ta-start Bdrx">
<div class="Ov-h Mx-a">
<div>
<div class="Grid-bind-end">
<span class="player-status Grid-u Lh-xs">
<a id="playernote-25718" href="http://sports.yahoo.com/nfl/players/25718/news" target="sports" class="playernote Ta-start yfa-icon Z-1 playernote-recent"><span class="ysf-player-icon ysf-player-icon-notes yfa-icon playernote-recent" title="Player notes">Player Note</span></a>
</span>
<div class="ysf-player-name Nowrap Grid-u Relative Lh-xs Ta-start"><a class="Nowrap" href="http://sports.yahoo.com/nfl/players/25718" target="sports">R. Tannehill</a> <span class="Fz-xxs">Mia - QB</span> </div>
</div>
<div class="Grid-bind-end">
<span class="ysf-player-status F-injury Fz-xxs Grid-u Lh-xs"></span>
<div class="ysf-player-detail Nowrap Grid-u Fz-xxs Lh-xs Ta-start"><span class="ysf-game-status "><a class="F-reset" href=".../miami-dolphins-washington-redskins.../" target="sports" onclick="pop(this)">Sun 10:00 am @ Was</a></span></div>
</div>
</div>
</div>
</td>
The only modification the code will make will be to change Sun 10:00 am @ Was
to Sun 10:00 am @ Was - 1
for example. The screenshot above should make it clear. The page it will be modifying is This one.
Edit2: I made a small version in jsFiddle but I am having trouble appending this to the greasemonkey script Brock created.