Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript/jQuery Assignment! Help please!

    Ok so I have created the HTML, in this case it's for a Owzat game (cricket), anyways I'm struggling with the JavaScript/jQuery side of it, this is my last assignment so if someone could help me out with the code it would help me a lot, thankyou in advance!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Twenty Overs Owzat Cricket Game </title>
    <link rel="stylesheet" href="jQuery/jquery-ui.css" />
    <link rel="stylesheet" href="Owzat.css" />
    </head>
    <body>
    <h1> OWZAT! TWENTY OVERS CRICKET </h1>
    <div id="tabs">
    <ul>
    <li> <a href="#Section1"> RULES </a> </li>
    <li> <a href="#Section2"> THE TEAMS </a> </li>
    <li> <a href="#Section3"> THE TOSS </a> </li>
    <li> <a href="#Section4"> PLAY </a> </li>
    <li> <a href="#Section5"> SCOREBOARD </a> </li>
    </ul>
    
    <div id="Section1">
    <p>
    Owzat is a simple but enjoyable cricket game dating back to around 1940 and, like its real-life counterpart, the team 
    scoring the most runs in twenty overs wins the game. Owzat is usually played by two players but can be played
    by a single player if no opponent is available. <p>
    The two teams and player's names are entered and a "coin" is tossed to determine who bats first. 
    The batting side (TEAM A) uses a pseudo six-sded "dice" to score runs and the following random results 
    are available with each "throw": 1 run, 2 runs, 0 runs, 4 runs, OWZAT!, and 6 runs. If runs are scored, 
    the scoreboard is updated accordingly. If OWZAT! is rolled, the Umpire rolls another pseudo-dice with the following 
    random options: Bowled, Stumped, Caught, Not Out, No Ball, and LBW. If Not Out, the game resumes; if No Ball, one is 
    added to the extras box on the scoreboard and the game resumes, otherwise the scoreboard is updated and the next 
    batsman's innings starts. <p>
    When all of TEAM A's batsmen are out or twenty overs have been bowled, whichever occurs first, the innings 
    is complete and it's TEAM B's turn to bat. Team B must try to obtain more runs than TEAM A before all 
    batsmen are out or twenty overs have been bowled.
    </p>
    </div>
    
    <div id="Section2">
    <span id="teamA">
    <p> TEAM A: <input id="teamAName" type="text" placeholder="Team A" value="ENGLAND" size="12"> </p>
    Player 1: <input id="A1" type="text" placeholder="Player 1" value="ROY" class="A"> <br>
    Player 2: <input id="A2" type="text" placeholder="Player 2" value="HALES" class="A"> <br>
    Player 3: <input id="A3" type="text" placeholder="Player 3" value="ROOT" class="A"> <br>
    Player 4: <input id="A4" type="text" placeholder="Player 4" value="MORGAN" class="A"> <br>
    Player 5: <input id="A5" type="text" placeholder="Player 5" value="STOKES" class="A"> <br>
    Player 6: <input id="A6" type="text" placeholder="Player 6" value="BUTLER" class="A"> <br>
    Player 7: <input id="A7" type="text" placeholder="Player 7" value="BILLINGS" class="A"> <br>
    Player 8: <input id="A8" type="text" placeholder="Player 8" value="RASHID" class="A"> <br>
    Player 9: <input id="A9" type="text" placeholder="Player 9" value="JORDAN" class="A"> <br>
    Player 10: <input id="A10" type="text" placeholder="Player 10" value="PLUNKET" class="A"> <br>
    Player 11: <input id="A11" type="text" placeholder="Player 11" value="FINN" class="A"> <br>
    </span>
    <span id="teamB">
    <p> TEAM B: <input id="teamBName" type="text" placeholder="Team B" value="NEW ZEALAND" size="12"> </p>
    Player 1: <input id="B1" type="text" placeholder="Player 1" value="GUPTIL" class="B"> <br>
    Player 2: <input id="B2" type="text" placeholder="Player 2" value="McCULLUM B" class="B"> <br>
    Player 3: <input id="B3" type="text" placeholder="Player 3" value="WILLIAMSON" class="B"> <br>
    Player 4: <input id="B4" type="text" placeholder="Player 4" value="TAYLOR" class="B"> <br>
    Player 5: <input id="B5" type="text" placeholder="Player 5" value="ELLIOT" class="B"> <br>
    Player 6: <input id="B6" type="text" placeholder="Player 6" value="SANTNER" class="B"> <br>
    Player 7: <input id="B7" type="text" placeholder="Player 7" value="RONCHI" class="B"> <br>
    Player 8: <input id="B8" type="text" placeholder="Player 8" value="McCULLUM N" class="B"> <br>
    Player 9: <input id="B9" type="text" placeholder="Player 9" value="HENRY" class="B"> <br>
    Player 10: <input id="B10" type="text" placeholder="Player 10" value="McCLENAGHAN" class="B"> <br>
    Player 11: <input id="B11" type="text" placeholder="Player 11" value="BOULT" class="B"> <br>
    </span>
    <span id="messageArea1">
    <button id="button" type="button" onclick="submitTeams()"> CONFIRM </button>
    <span id = "messageArea1Text"> </span>
    </span>
    </div>
    
    <div id="Section3">
    <span id="messageArea2">
    <h2> THE OWZAT! TOSS </h2>
    <p id="teamToCall"> TEAM A to call: </p>
    <p> <input id="HeadsOrTails" type="text" placeholder="Enter Heads or Tails"> </p>
    <p> <button id="tossButton" type="button" onclick="tossUp()"> SPIN </button> </p>
    </span>
    <span id="messageArea3">
    </span>
    </div>
    
    <div id="Section4">
    <span id="playHeader">
    The batting team's name will be displayed here...
    </span>
    <span id="playBoardA">
    <span id="playBoardATop">
    <table>
    <tr>
    <td id="batPlayer1" class="manIn"> Player 1 </td> 
    <td id="bat1Status"> NOT OUT </td> 
    <td id="bat1Score"> 0 </td>
    <td id="onStrike1" class="unhidden"> <| </td>
    </tr> 
    </table>
    </span>
    
    <span id="playBoardAMiddle">
    <table>
    <tr>
    <td id="batPlayer2" class="manIn"> Player 2 </td> 
    <td id="bat2Status"> NOT OUT </td> 
    <td id="bat2Score"> 0 </td>
    <td id="onStrike2" class="hidden"> <| </td>
    </tr>
    </table>
    </span>
    <span id="playBoardABottom">
    <table>
    <tr>
    <td id="playExtras" class="batExtras"> EXTRAS </td>
    <td id="spacer3"> </td>
    <td id="extrasRuns" class="batExtras"> 0 </td>
    </tr>
    </table>
    </span>
    </span>
    
    <span id="playBoardLower1">
    <table>
    <tr id="bowlRow">
    <td id="bowlButton" onClick="bowlIt()"> BOWL </td> 
    <td id="numDeliveries" data-toggle="tooltip" title="Number of deliveries this over."> 0 </td> 
    <td id="spacer1">  </td>
    <td id="bowlResult" data-toggle="tooltip" title="Runs scored from this delivery."> Ready... </td>
    </tr>
    </table>
    </span>
    
    <span id="playBoardLower2">
    <table>
    <tr id="umpireRow">
    <td id="umpireButton" onClick="appealToUmpire()"> UMPIRE </td> 
    <td id="spacer2">  </td> 
    <td id="umpireCall" data-toggle="tooltip" title="Result of appeal to umpire."> Ready... </td>
    </tr> 
    </table>
    </span>
    
    <span id="playBoardB">
    <table align="center">
    <tr> <td id="runsText" class="totalText"> TOTAL </td> </tr>
    <tr> <td id="runsTotal" class="totalBox"> 0 </td> </tr>
    <tr> <td id="wicketsText" class="totalText"> WICKETS </td> </tr>
    <tr> <td id="wicketsBox" class="totalBox"> 0 </td> </tr>
    <tr> <td id="oversText" class="totalText"> OVERS </td> </tr>
    <tr> <td id="oversBox" class="totalBox"> 0 </td> </tr>
    </table>
    </span>
    
    </div>
    
    <div id="Section5">
    <span id="scoreboardHeader">
    SCOREBOARD
    </span>
    <span id="columnOne">
    <table>
    <tr>
    <td id="battingA" class="tableAText" colspan="2" align="center"> </td>
    </tr>
    <tr>
    <td class="tableAText"> Total </td> <td id="totalA" class="tableA" align="center"> </td>
    </tr>
    <tr> <td class="tableAText" style="height: 20px"> </td> </tr>
    <tr>
    <td class="tableAText"> Wickets </td> <td id="wicketsA" class="tableA" align="center"> </td>
    </tr>
    <tr> <td class="tableAText" style="height: 20px"> </td> </tr>
    <tr>
    <td class="tableAText"> Overs </td> <td id="oversA" class="tableA" align="center"> </td>
    </tr>
    <tr> <td class="tableAText" style="height: 20px"> </td> </tr>
    <tr>
    <td id="battingB" class="tableAText" colspan="2" align="center"> </td>
    </tr>
    <tr>
    <td class="tableAText"> Total </td> <td id="totalB" class="tableA" align="center"> </td>
    </tr>
    <tr> <td class="tableAText" style="height: 20px"> </td> </tr>
    <tr>
    <td class="tableAText"> Wickets </td> <td id="wicketsB" class="tableA" align="center"> </td>
    </tr>
    <tr> <td class="tableAText" style="height: 20px"> </td> </tr>
    <tr>
    <td class="tableAText"> Overs </td> <td id="oversB" class="tableA" align="center"> </td>
    </tr>
    </table>
    </span>
    <span id="columnTwo">
    <table>
    <tr> <td colspan="2" id="battingSide"> </td> </tr>
    <tr> <td class="batsmanNumber"> 1.</td>
    <td class="batsmanName" id="batName1"> </td> </tr>
    <tr> <td class="batsmanNumber"> 2.</td>
    <td class="batsmanName" id="batName2"> </td> </tr>
    <tr> <td class="batsmanNumber"> 3. </td>
    <td class="batsmanName" id="batName3"> </td> </tr>
    <tr> <td class="batsmanNumber"> 4. </td>
    <td class="batsmanName" id="batName4"> </td> </tr>
    <tr> <td class="batsmanNumber"> 5. </td>
    <td class="batsmanName" id="batName5"> </td> </tr>
    <tr> <td class="batsmanNumber"> 6. </td>
    <td class="batsmanName" id="batName6"> </td> </tr>
    <tr> <td class="batsmanNumber"> 7. </td>
    <td class="batsmanName" id="batName7"> </td> </tr>
    <tr> <td class="batsmanNumber"> 8. </td>
    <td class="batsmanName" id="batName8"> </td> </tr>
    <tr> <td class="batsmanNumber"> 9. </td>
    <td class="batsmanName" id="batName9"> </td> </tr>
    <tr> <td class="batsmanNumber"> 10. </td>
    <td class="batsmanName" id="batName10"> </td> </tr>
    <tr> <td class="batsmanNumber"> 11. </td>
    <td class="batsmanName" id="batName11"> </td> </tr>
    </table>
    
    <table>
    <tr> <td class="scoreExtras" id="batExtras"> EXTRAS </td> </tr>
    <tr> <td class="scoreExtras" id="totalText"> TOTAL </td> </tr>
    <tr> <td class="scoreExtras" id="batOvers"> OVERS </td> </tr>
    </table>
    </span>
    
    <span id="columnThree">
    <table>
    <tr> <td class="scoreHowOut" id="howOutHeader"> HOW OUT </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut1"> NOT OUT </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut2"> NOT OUT </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut3"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut4"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut5"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut6"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut7"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut8"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut9"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut10"> </td> </tr>
    <tr> <td class="scoreHowOut" id="howOut11"> </td> </tr>
    </table>
    </span>
    
    <span id="columnFour">
    <table>
    <tr> <td class="runsScored" id="runsHeader"> RUNS </td> </tr>
    <tr> <td class="runsScored" id="runs1"> 0 </td> </tr>
    <tr> <td class="runsScored" id="runs2"> 0 </td> </tr>
    <tr> <td class="runsScored" id="runs3"> </td> </tr>
    <tr> <td class="runsScored" id="runs4"> </td> </tr>
    <tr> <td class="runsScored" id="runs5"> </td> </tr>
    <tr> <td class="runsScored" id="runs6"> </td> </tr>
    <tr> <td class="runsScored" id="runs7"> </td> </tr>
    <tr> <td class="runsScored" id="runs8"> </td> </tr>
    <tr> <td class="runsScored" id="runs9"> </td> </tr>
    <tr> <td class="runsScored" id="runs10"> </td> </tr>
    <tr> <td class="runsScored" id="runs11"> </td> </tr>
    <tr> <td class="runsScored" id="scoreExtras"> 0 </td> </tr>
    <tr> <td class="runsScored" id="scoreTotal"> 0 </td> </tr>
    <tr> <td class="runsScored" id="scoreOvers"> 0 </td> </tr>
    </table>
    </span>
    </div>
    
    </div>
    <script src="jQuery/jquery-1.11.2.min.js"> </script>
    <script src="jQuery/jquery-ui-1.11.4.min.js"> </script>
    <script src="Owzat.js"> </script>
    <audio id="appealSound">
    <source src="owzat.mp3" type="audio/mpeg">
    </audio>
    <audio id="applause">
    <source src="Applause.mp3" type="audio/mpeg">
    </audio>
    <audio id="outApplause">
    <source src="outApplause.mp3" type="audio/mpeg">
    </audio>
    <audio id="batApplause">
    <source src="batApplause.mp3" type="audio/mpeg">
    </audio>
    <audio id="soundAlert">
    <source src="alert.mp3" type="audio/mpeg">
    </audio>
    </body>
    </html>
    Last edited by vinyl-junkie; Jun 7th, 2018 at 09:11 PM. Reason: added code tags

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,845
    Thanks
    58
    Thanked 690 Times in 685 Posts
    I think you forgot to post the contents of your owzat.js file...


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •