Creating Javascript that outputs various results depending on comparisons

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

22-Jan-13 14:14
So i am new to Javascript and have been self-teaching through W3Schools. I'm having difficulty working out how I can do the following. I'm currently using a spreadsheet with various If statements to figure the scores. If somebody can help by giving an example or pointing me in the direction of similar script I'd be grateful.

Below is an example of the HTML i currently have. I need to check if "Homea" and "Awaya" in the form match "Homea1" and "Awaya1" in the table respectively. If they do, then the output would be 3 and that would get placed in "Scorea1", this would repeat down for the rest of the code. There is a further condition if they don't match then you need to figure out that if "Homea" is larger than "Awaya" and "Homea1" is larger than "Awaya1" then 1 would be the output to "Scorea1". 1 would be the output also, if you replace the larger than to equal to and smaller than.

I know this sounds complicated so I'll explain the reasons behind this and how it sounds in practice.

A user will have their predictions of a football match (Soccer for Americans) in the table. Once the results are known they can enter them in the form and hit a button to calculate results. If their prediction matches the result they get 3 points, If their prediction guesses the correct outcome, (i.e. Home win, draw, Away win) then they get 1 point.


<form name="rescalc">
Home Score: <input name="Homea" type="number" id="Homea">
Away Score: <input name="Awaya" type="number" id="Awaya"><br>
Home Score: <input name="Homeb" type="number" id="Homeb">
Away Score: <input name="Awayb" type="number" id="Awayb"><br>
Home Score: <input name="Homec" type="number" id="Homec">
Away Score: <input name="Awayc" type="number" id="Awayc"><br>
Home Score: <input name="Homed" type="number" id="Homed">
Away Score: <input name="Awayd" type="number" id="Awayd"><br>
</form>

<br>

<table name="Predictions">
<tr><th colspan="5">Joe Bloggs</th></tr>
<tr><th>Game</th><th>Home</th><th>vs</th><th>Away</th><th>Score</th></tr>
<tr><td>Man Utd vs Man City</td><td type="number" id="Homea1">2</td><td>-</td><td type="number" id="Awaya1">1</td>
<td type="number" id="Scorea1"></td></tr>
<tr><td>Chelsea vs Arsenal</td><td type="number" id="Homeb1">3</td><td>-</td><td type="number" id="Awayb1">3</td>
<td type="number" td="Scoreb1">CALC GOES HERE</td></tr>
<tr><td>Liverpool vs Everton</td><td type="number"id="Homec1">0</td><td>-</td><td type="number" id="Awayc1">0</td>
<td type="number" id="Scorec1">CALC GOES HERE</td></tr>
<tr><td>Stoke vs Swansea</td><td type="number" id="Homed1">0</td><td>-</td><td type="number" id="Awayd1">1</td>
<td type="number" id="Scored1">CALC GOES HERE</td></tr>
</table>


As an example if Game 1 finishes 2-1, 3 points are output, Game 2 finishes 1-1, then 1 point is output, Game 3 finishes 1-0 then 0 is output and finally Game 4 finishes 0-2, then 1 point is output.

As I mentioned, if somebody could just show me how to get started with this I think I can manage and figure out how to expand the script. Thanks in advance to anyone who replies.
10-Feb-13 21:40
Tips:

- Use jQuery.

- Use val() to retrieve the values of the input fields.

- Use text() to retrieve and set the text nodes inside your td elements.

- Use if..then..else blocks to compute your results.

More info: http://www.elated.com/articles/jquery-accessing-element-content/

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
11-Feb-13 04:33
"Use if..then..else blocks to compute your results."

Or switch statements.

http://www.w3schools.com/js/js_switch.asp

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
11-Feb-13 17:07
Good call Chris - I forgot JS supported switch

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

 
New posts
Old posts

Follow Elated