Question

$(".panel_wager_container input").change(function(event)
{
    var wager = $(this).val();
    var multiplier = $('#multiplier').html();
    var limit = 15.00;
    var winnings = $("#potential_winnings").val();
    if(wager - 0 == wager && wager.length > 0) {
        if(winnings <= limit) {
            $("#potential_winnings").html(Math.round((wager * multiplier) * 100) / 100);
        } else {
            $("#potential_winnings").html = limit;
            $(".panel_wager_container input").html(Math.round((limit / multiplier) * 100) / 100);
        }
    } else {
        $("#potential_winnings").html('0.00');
    }
});

Im not sure why this jquery code is not working. The aim is to take in the input variable and multiple it by the multiplier to work out the winnings. I want to limit the maximum winnings to 15.00. If the winnings is below the limit update #potential_winnings. If the winnings is above the limit set the #potential_winnings to the limit variable and then work out the wager based on the potential_winnings and set that.

I’ve tried to debug this as much as I can, but I cant work out the right way to do it. The lines that dont work seem to be:
var winnings = $(“#potential_winnings”).val();
winnings doesnt ever evaluate as less than limit. If I replace winnings with a variable lower than limit it evaluates correctly.

AND:
$(“.panel_wager_container input”).html(Math.round((limit / multiplier) * 100) / 100);
This line does not output any changes to the selected element.

This is the html this script it working on:

<div class="panel_wager_inform">Maximum Wager: 170.00</div><br /> 
                    <div class="panel_wager_container"> 
                    <img src="/img/rounded/input/left.png" class="left" alt="" /><img src="/img/rounded/input/right.png" class="right" alt="" /><div class="input text required"><label for="BetWager">Wager</label><input name="data[Bet][wager]" type="text" value="170.00" id="BetWager" /></div>                        
                    </div><br /> 
                    <div class="clear"></div> 
                    <strong>Multiplier:</strong> <span id="multiplier">11.85</span>x<br /><br /> 
                    <strong>Potential Winnings:</strong> 
                    $<span id="potential_winnings">2,014.84</span> 

Any help would be greatly appreciated. Thank you.

UPDATED: This was the solution I used after the guidance from this thread. Thank you for the help.

    $(".panel_wager_container input").change(function(event)
{
    var wager = $(this).val();
    var multiplier = $('#multiplier').html();
    var limit = 15.00;
    var winnings = Math.round((wager * multiplier) * 100) / 100;
    if(wager - 0 == wager && wager.length > 0) {
        if(winnings <= limit) {
            $("#potential_winnings").html(Math.round((wager * multiplier) * 100) / 100);
        } else {
            $("#potential_winnings").html(limit);
            $(".panel_wager_container input").val(Math.round((limit / multiplier) * 100) / 100);
        }
    } else {
        $("#potential_winnings").html('0.00');
    }
});

Answer 1

.val() only works for input controls. You need to get the contents with .text():

var winnings = $("#potential_winnings").text();

Furthermore, you should “cast” the returned String into an Integer by invoking either parseInt() or use +.

if(+winnings <= limit) {
}

The same goes for your multiplier variable. Example:

$(".panel_wager_container input").change(function(event)
{
    var wager       = +$(this).val(),
        $multiplier = $('#multiplier'),
        $potentialwinnings = $("#potential_winnings"),
        multiplier  = $multiplier.html(),
        limit       = 15.00,
        winnings    = +$("#potential_winnings").text();

    if(wager.length > 0) {
        if(winnings <= limit) {
            $potentialwinnings.html(Math.round((wager * multiplier) * 100) / 100);
        } else {
            $potentialwinnings.html = limit;
            $(".panel_wager_container input").html(Math.round((limit / multiplier) * 100) / 100);
        }
    } else {
        $potentialwinnings.html('0.00');
    }
});