JavaScript Help [Solved]

[MikeD]

Been at this for a little bit, I made a script in JS to update the points available to use.

Here's the PHP, sorry if it's a bit ugly.

Basically what I want is for JS to take the values of the Batting, Fielding, Pitching for each row, and when they are changed, update the points available in the points avail column. If the total is over 10, I want it to say "Error"

Code: Select all

for ($i = 1; $i <= 10; $i++){

                if ($i == 10){
                    $inning = "Extra";
                } else {
                    switch($i){
                        case 1:
                            $inning = $i."st";
                            break;
                        case 2:
                            $inning = $i."nd";
                            break;
                        case 3:
                            $inning = $i."rd";
                            break;
                        default:
                            $inning = $i."th";
                            break;
                    }
                }

                switch($i){
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 9:
                        echo "<tr>";
                        break;
                    default:
                        echo "<tr class='alt'>";
                        break;
                }

                echo "<td>".$inning."</td>";

                $Get_Info = mysqli_query($db,"SELECT `team_id`,`sp_rotation`,`roster_view` FROM `coaches` WHERE `coach_id`='$player->coach_id'") or die (mysqli_error($db));
                $coach_info = mysqli_fetch_array($Get_Info);
                $team_id = $coach_info['team_id'];

                $one = $i."B";
                $two = $i."F";
                $three = $i."P";

                $Get_Setting = mysqli_query($server,"SELECT `$one`,`$two`,`$three` FROM `coll_team_strategy` WHERE `team_id`='$team_id'");
                $Setting = mysqli_fetch_array($Get_Setting);

                switch ($i){
                    case 1:
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('first')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('first')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('first')'>";
                        $div = "first";
                        break;
                    case 2:
                        $div = "second";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('second')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('second')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('second')'>";
                        break;
                    case 3:
                        $div = "third";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('third')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('third')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='batting_".$i."' onchange='CalcPoints('third')'>";
                        break;
                    case 4:
                        $div = "fourth";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('fourth')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('fourth')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('fourth')'>";
                        break;
                    case 5:
                        $div = "fifth";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('fifth')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('fifth')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('fifth')'>";
                        break;
                    case 6:
                        $div = "sixth";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('sixth')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('sixth')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('sixth')'>";
                        break;
                    case 7:
                        $div = "seventh";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('seventh')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('seventh')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('seventh')'>";
                        break;
                    case 8:
                        $div = "eighth";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('eighth')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('eighth')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('eighth')'>";
                        break;
                    case 9:
                        $div = "ninth";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('ninth')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('ninth')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('ninth')'>";
                        break;
                    case 10:
                        $div = "tenth";
                        $Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcPoints('tenth')'>";
                        $Field_Select = "<select name='fielding_".$i."' id='fielding_".$i."' onchange='CalcPoints('tenth')'>";
                        $Pitch_Select = "<select name='pitching_".$i."' id='pitching_".$i."' onchange='CalcPoints('tenth')'>";
                        break;
                }

                echo "<td> <div class='$div'>".(10 - $Setting[$one] - $Setting[$two] - $Setting[$three])."</div> </td>";

                echo "<td>";
                    echo $Bat_Select;

                    for ($b = 0; $b<= 10; $b++){
                        if ($b == $Setting[$one]){
                            echo "<option selected='selected' value='$b'>$b</option>";
                        } else {
                            echo "<option value='$b'>$b</option>";
                        }

                    }

                    echo "</select>";
                echo "</td>";

                echo "<td>";
                echo $Field_Select;

                for ($b = 0; $b<= 10; $b++){
                    if ($b == $Setting[$two]){
                        echo "<option selected='selected' value='$b'>$b</option>";
                    } else {
                        echo "<option value='$b'>$b</option>";
                    }
                }

                echo "</select>";
                echo "</td>";

                echo "<td>";
                echo $Pitch_Select;

                for ($b = 0; $b<= 10; $b++){
                    if ($b == $Setting[$three]){
                        echo "<option selected='selected' value='$b'>$b</option>";
                    } else {
                        echo "<option value='$b'>$b</option>";
                    }
                }

                echo "</select>";
                echo "</td>";

                echo "</tr>";

            }

And here's the Javascript

Code: Select all

function CalcPoints(inning){

            switch(inning){
                case 'first':
                    batting = parseInt($('#batting_1').val());
                    fielding = parseInt($('#fielding_1').val());
                    pitching = parseInt($('#pitching_1').val());
                    break;
                case 'second':
                    batting = parseInt($('#batting_2').val());
                    fielding = parseInt($('#fielding_2').val());
                    pitching = parseInt($('#pitching_2').val());
                    break;
                case 'third':
                    batting = parseInt($('#batting_3').val());
                    fielding = parseInt($('#fielding_3').val());
                    pitching = parseInt($('#pitching_3').val());
                    break;
                case 'fourth':
                    batting = parseInt($('#batting_4').val());
                    fielding = parseInt($('#fielding_4').val());
                    pitching = parseInt($('#pitching_4').val());
                    break;
                case 'fifth':
                    batting = parseInt($('#batting_5').val());
                    fielding = parseInt($('#fielding_5').val());
                    pitching = parseInt($('#pitching_5').val());
                    break;
                case 'sixth':
                    batting = parseInt($('#batting_6').val());
                    fielding = parseInt($('#fielding_6').val());
                    pitching = parseInt($('#pitching_6').val());
                    break;
                case 'seventh':
                    batting = parseInt($('#batting_7').val());
                    fielding = parseInt($('#fielding_7').val());
                    pitching = parseInt($('#pitching_7').val());
                    break;
                case 'eighth':
                    batting = parseInt($('#batting_8').val());
                    fielding = parseInt($('#fielding_8').val());
                    pitching = parseInt($('#pitching_8').val());
                    break;
                case 'ninth':
                    batting = parseInt($('#batting_9').val());
                    fielding = parseInt($('#fielding_9').val());
                    pitching = parseInt($('#pitching_9').val());
                    break;
                case 'tenth':
                    batting = parseInt($('#batting_10').val());
                    fielding = parseInt($('#fielding_10').val());
                    pitching = parseInt($('#pitching_10').val());
                    break;
            }

            points = ".".inning;
            total = 10 - (batting + fielding + pitching);

            if (total < 0){
                total = "Error";
            }

            $(points).html(total);

        }

[MikeD]

Forgot to mention, the JS error I get is "Unexpected Token }"

[Jackolantern]

Does it give a line number? That sounds like a syntax error.

[MikeD]

Does it give a line number? That sounds like a syntax error.

It says 554, but 554 is part of the loop, which makes the table all 1 line.

http://gyazo.com/3f6c3cca5fd3eccabc43f716d4a29a9e

and here's a pic of the table, just so you can see what it looks like.

http://gyazo.com/c0380c8e811d0a8b4bc46e8b1c451137

[MikeD]

Well, I just tried it with it's own function, and not a switch, and worked just fine, using this.

Code: Select all

$Bat_Select = "<select name='batting_".$i."' id='batting_".$i."' onchange='CalcFirst()'>"

And this Script

Code: Select all

function CalcFirst(){
            batting = parseInt($('#batting_1').val());
            fielding = parseInt($('#fielding_1').val());
            pitching = parseInt($('#pitching_1').val());
            total = 10 - (batting + fielding + pitching);
            $('.first').html(total);
        }

But i'd rather not have to use 10 different scripts for this lol.

[Chris]

Switches in JavaScript tend to not always work the way you want them to. Best to simply avoid switched in JavaScript.

[a_bertrand]

Never had any issues with switches in Javascript. Any examples of what can go bad?

[Jackolantern]

I believe type coercion works a bit differently if you are not careful in JS. I think I remember hearing that before, but I have not run into any of the problems myself.

[Renavoid]

I'm only briefly looking at this... but down at the bottom of the javascript, did you mean to say:

Code: Select all

points = ".".inning;

I've been trying to figure out if that would do something I'm not expecting it to, but that certainly generates an Unexpected Token error when I try to mimic it in my Chrome console with something like "."."tenth" (which is basically what you're trying to set points to). There are obviously methods to use directly off a string like that, such as:

Code: Select all

".".italics(); // generates the code <i>.</i>

But, otherwise...that might be your problem.

[Jackolantern]

Yeah, that would not work in either PHP or Javascript. As Ren pointed out, in PHP, you would need to either add $ to the front of $points and $inning or turn inning() into a method. Or for Javascript you need to turn the . used to connect the strings into a + sign.