1. 技术文章
  2. How to create a Sports Bet Calculator using javascript

How to create a Sports Bet Calculator using javascript

由 拜拜、爱过 提交于 2020-02-08 11:35:29

问题


I have created this simple straight bet calculator using JavaScript. It allows me to calculate, if it is a winning ticket, how much the payout will be.

How it works? First I will enter the moneyLine number, which can be mostly any 3 digits number and I then enter the bet amount.

Now, the moneyLine can either be negative (-) if betting a favorite or positive (+) if betting the underdog.

Please see the code below: For testing proposes, I use any -110 or 110 and then, any bet amount. But it can actually be any chosen moneyLine and betAmount.

// Single Straight Sports Bet Calculator 

function betCalculator(moneyLine) { 

    var odds;
    var betAmount = +prompt("Enter Bet Amount"); 

    if (moneyLine >= 0) { 
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 

    } else  {
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 


    } return ((odds * betAmount).toFixed(2)); 
}
 alert(betCalculator(+prompt("Enter Money Line")));


// Single Straight Sports Bet Calculator 

function betCalculator(moneyLine) { 
    
    var odds;
    var betAmount = +prompt("Enter Bet Amount"); 
    
    if (moneyLine >= 0) { 
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 
    
    } else  {
        odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1; 
    

    } return ((odds * betAmount).toFixed(2)); 
}
 alert(betCalculator(+prompt("Enter Money Line")));

And here is what I would like to have accomplished. My desire is to create a Parlay Calculator, using the above formulas, that will allow me to enter one bet amount and several money lines, instead of just one.

A parlay is a single bet that links together two or more individual wagers for a high payout. So a parlay ticket can have two or more teams on it.

What I would also like to do is to be able to enter those numbers (moneyLine and betAmount) on a form instead of a popup window.

I tried doing it myself with no avail. Somehow, it is not showing the result. 

// True Odds Parlay Bets
  
const myForm= document.getElementById("my-form")

var odds;
var moneyLine

  , trueOdds=
      { 'moneyLine1 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine2 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine3 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine4 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine5 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine6 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine7 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine8 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      , 'moneyLine9 >= 0': (odds = moneyLine >= 0 ? (moneyLine / 100) + 1 : (100 / Math.abs(moneyLine)) + 1)
      };
myForm.onsubmit = e=>e.preventDefault();  // disable form submit
myForm.oninput = betCalculator;

function betCalculator() {
    let bet  = myForm.betAmount.valueAsNumber, odds = trueOdds[(myForm.moneyLine1.value + '_' + myForm.moneyLine2.value + '_' + myForm.moneyLine3.value + '_' + myForm.moneyLine4.value + '_' + myForm.moneyLine5.value + '_' + myForm.moneyLine6.value + '_' + myForm.moneyLine7.value + '_' + myForm.moneyLine8.value + '_' + myForm.moneyLine9.value)];

 

// This code is used to get rid of "NaN"
if ( isNaN(bet) || isNaN(odds) ) {
  return 0;
}

myForm.result.value = '" ' + '$ '+(odds * bet).toFixed(2) + ' "'
}
betCalculator()
fieldset { margin-top: 1em;}
 label { display: inline-block; width: 6em; }
 input[type="radio"] {
   -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
   -moz-appearance: checkbox;    /* Firefox */
   -ms-appearance: checkbox;
   }
<head>
<title>True Odds Parlay Bet Calculator</title>
<link rel="stylesheet" type="text/css" href="trueoddstyle.css">


</head>
<body>

<h2>True Odds Parlay Bet Calculator</h2>

<p>
  Useful for both <b>Negative "-"</b> and/or <b>Positive "+"</b> Money Lines including Single Straight Bets!
</p>

<form action="" id="my-form">
  
  <fieldset>
    <legend>Bet Amount :</legend>
    <input type="number" name="betAmount" step=any min=0>
  </fieldset>
  <fieldset>
    <legend>Team Respective Money Line :</legend>
    <input type="number" name="moneyLine1" step=any min=0>
    <input type="number" name="moneyLine2" step=any min=0>
    <input type="number" name="moneyLine3" step=any min=0>
    <input type="number" name="moneyLine4" step=any min=0>
    <input type="number" name="moneyLine5" step=any min=0>
    <input type="number" name="moneyLine6" step=any min=0>
    <input type="number" name="moneyLine7" step=any min=0>
    <input type="number" name="moneyLine8" step=any min=0>
    <input type="number" name="moneyLine9" step=any min=0>
  </fieldset>
  <fieldset>
    <legend>Payout :</legend>
    <output name="result" value=''></output>

    <br><br>
    <input type="reset" value="Reset Calculator!"</input>
  </fieldset>
</form>


</body>

Please see the snippet code for details. Your help is very appreciated.


回答1:


Revised first version :)

const bt_Nwline = document.getElementById('New-Line')
  ,   xForm     = document.getElementById('form-X')
  ,   wTable    = xForm.querySelector('table')
  ,   baseLine  = wTable.querySelector('thead tr:nth-of-type(3)')
  ,   tBody     = wTable.querySelector('tbody')
  ,   tPayout   = wTable.querySelector('tfoot td:nth-of-type(2)')
  ;
xForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ;
xForm.onreset =_=>{ tPayout.textContent = '0.00' }
  ;
function betCalculator()
  {
  let bet  = xForm.betAmount.valueAsNumber || 0
    , odds = [...tBody.querySelectorAll('input')]
              .filter(ml=>!isNaN(ml.valueAsNumber) )
              .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                      ? (ml.valueAsNumber /100) +1
                                      : (100 / Math.abs(ml.valueAsNumber)) +1
                    ,1)
  tPayout.textContent = ((odds *bet).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g,',')
  }
betCalculator()
  ;
bt_Nwline.onclick=_=>
  {
  tBody.appendChild( baseLine.cloneNode(true)) 
  }
tBody.onclick=e=>
  {
  if (!e.target.matches('button')) return
  wTable.deleteRow(e.target.closest('tr').rowIndex)
  betCalculator()
  }
xForm.oninput = betCalculator
  ;
table   { border-collapse: collapse; }
caption { background-color: #1a4641; color: whitesmoke; font-weight: bold;  padding: .6em;}
td:nth-of-type(1) { min-width:8em; }
td      { border: 1px solid grey; padding: .4em .8em; }
thead   { background-color: #7adfd3; color: #1d1313;  font-weight: bold; }

thead tr:nth-of-type(1) td:nth-of-type(1) { text-align: right; }
thead tr:nth-of-type(2) td:nth-of-type(1) { text-align: center; }

thead tr:nth-of-type(3) { display: none; counter-reset: line; }
tbody tr { counter-increment: line; }
tbody td:nth-of-type(1) {  color: darkslategrey; }
tbody td:nth-of-type(1)::before { content: counter(line) '\00a0-\00a0\00a0'; }

tfoot { font-weight: bold; }
tfoot td:nth-of-type(1) { text-align: right; }
tfoot td:nth-of-type(2)::before { content: '$ ' }

input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}

button  { 
  width: 2em;
  height: 1.4em;
  border-radius: 1em / .6em;
  color: whitesmoke;
  font-size: .9em;
  font-weight: bolder;
  line-height: .8em;
  padding: 0;
}
thead tr:nth-of-type(1) button { background-color: #063329; }
thead tr:nth-of-type(2) button { background-color: crimson; }
tbody button  { background-color: #071b3f;}
<form action="" id="form-X">
  <table>
    <caption title="Useful for both Negative ‘−’ and / or Positive ‘+’ Money Lines including Single Straight Bets!">
      True Odds Parlay Bet Calculator
    </caption>
    <thead>
      <tr>
        <td>Bet Amount : </td>
        <td><input type="number" step="10" value="0" name="betAmount" min="0"></td>
        <td><button type="reset">&empty;</button></td>   
      </tr>
      <tr><td colspan="2">Teams Money Lines</td>  <td><button id="New-Line">+</button></td></tr>
      <tr>
        <td contenteditable spellcheck="false">...</td>
        <td><input type="number" step="10" value="0"></td>
        <td><button>&#8722;</button></td>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
        <td> Payout : </td>
        <td colspan="2"> </td>
      </tr>
    </tfoot>
  </table>
</form>

After looking your second Snippet I do that:

const myForm     = document.getElementById('my-form')
  ,   moneyLines = [...myForm.querySelectorAll('.moneyLine')]
  ;
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
myForm.oninput = betCalculator
  ;
function betCalculator()
  {
  let bet  = myForm.betAmount.valueAsNumber || 0
    , odds = moneyLines
                .filter(ml=>!isNaN(ml.valueAsNumber) )
                .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                        ? (ml.valueAsNumber /100) +1
                                        : (100 / Math.abs(ml.valueAsNumber)) +1
                      ,1)

  // myForm.result.value =  (((odds *bet) -bet) +bet).toFixed(2)
  myForm.result.value = (odds *bet).toFixed(2)
  }
betCalculator()
form#my-form { position: relative; }
legend {font-size: .9em; }
legend:after { content: '\00a0' }
fieldset { display:block; width: 16em; position: absolute; }
fieldset:nth-child(1){ top: 1em; left: 1em; }
fieldset:nth-child(2){ top: 1em; left:20em; }
fieldset:nth-child(3){ top:19em; left: 1em; }
label   { display: block; float: left; clear: both; margin: .2em 1em .4em 0;}
label b { display: inline-block; width:2em }
label b::after { content:' : '}
label input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}
output { font-weight: bold; width: 14em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;}
output::before {  content: '$ '; }
<h2>True Odds Parlay Bet Calculator</h2>

<p><small>
  Useful for both <b>Negative "&#8722;"</b> and/or <b>Positive "+"</b> Money Lines including Single Straight Bets!
</small></p>

<form action="" id="my-form">
  <fieldset>
    <legend>Bet Amount :</legend>
    <label><input type="number" name="betAmount" step=any min=0></label>
  </fieldset>

  <fieldset>
    <legend>Team Respective Money Lines :</legend>
    <label><b>1</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>2</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>3</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>4</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>5</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>6</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>7</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>8</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>9</b><input type="number" class="moneyLine" step=any ></label>
  </fieldset>

  <fieldset>
    <legend>Payout :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>


来源：https://stackoverflow.com/questions/60100701/how-to-create-a-sports-bet-calculator-using-javascript

标签
javascript
calculator
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!