jdloader jdloader - 6 months ago 17
jQuery Question

.data, information pulling through as NaN?

I am trying to build a simple page, which will calculate your stake and work out your return, like a betting shop.

So far, I have it working by hard coding in my odds. But as you will see in my code, I have the odds pulling through in an alert, which works well. My issue is trying to incorporate this variable into my html, I get the output of "NaN", but I have no clue why! My attempt is commented out, but hopefully this is an easy fix, which I just can't see!

My HTML:

<html>

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title></title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {

$.getJSON("http://localhost:8888/json.json", function(result){

$.each(result, function(i, field){
//create an element and append data attribute to the element - in this case field name
el = $("<div class='bet-block'>" + field.name + field.odds.numerator+"/" + field.odds.denominator + " </div>").data("name", field.name).data("odds", field.odds.numerator+"/" + field.odds.denominator);

//append element to DOM
$(".bets").append( el );
})
//define a click handler for all new elements to display data in a div
$(document).on( "click", ".bet-block", function() {
$(".bet-name").text( $( this ).data("name") );
$(".bet-odds").text( $( this ).data("odds") );
});
});


function calculate_odds() {
var winnings = 0,
betting_amount = $(".stake").val();

var current_odds = $('.bet-odds').text();


// THIS ECHOS CORRECT ODDS
alert(current_odds);

winnings = (2/1) * betting_amount;
// winnings = (current_odds) * betting_amount;

$('.js-winnings').text(winnings);
}

$(document).ready(function() {
$(".stake").keyup(function(){
calculate_odds();
});
});
});

</script>
</head>

<body>

<div class="container">
<div class="row">
<div class="col-md-8">
<div class="bets">
<h1>All Bets</h1>
</div>
</div>
<div class="col-md-4">
<div class="slip">
<h1>My Bet Slip</h1>
<div class="new-bet-slip">
<p><span class="bet-name"></span> to win @ <span class="bet-odds"></span></p>
<input class="stake" type="number" name="betting-amount" min="1" max="5">
<div class="bet-return">
<span>£</span><span class="js-winnings">0.00</span>
</div>
</div>
</div>
</div>
</div>
</div>


</body>

</html>


My JSON:

[{"name":"name1","odds":{"numerator":10,"denominator":1}},[{"name":"name2","odds":{"numerator":5,"denominator":2}}, [{"name":"name3","odds":{"numerator":2,"denominator":1}}, ]


Thanks in advance!

Answer

as @gujefers pointed out: Your current_odds which is declared as:

var current_odds = $('.bet-odds').text();

Returns string refer to http://api.jquery.com/text/

So when you try to do arithmetic operation on string which is * in winnings = (current_odds) * betting_amount; You get NaN (not a number) error.

So the safe bet would be try converting the string value to int. parseInt function converts string to int

for example try this is console:

var a = '1';
var b = parseInt(a);
console.log(typeof(a)); //this will return string 
console.log(typeof(b)); //this will return number
Comments