jQuery append() Not working as anticipated

[Styles2304]

I've programmed a simple dice roller but when I append the values to the div, they show up for a split second and then disappear. It only does it for the custom roll section where you input data (ex: 2d20+3d20) into a form and submit.

Here's where I generate the values. I don't expect the problem to be here as you can see all the values for a split second unless maybe it's something in the way that diceUpdate() is called.
(Note: This is only wrapped in PHP tags to make distinguishing the code simpler)

PHP Code:

        //Custom Rolls
        $("#diceCustom").submit(function() {
            var rollText = $("#diceCustomText").val();
            //Splits the string into separate dice rolls
            var rollSplit = rollText.split(",");

            for (var a = 0; a < rollSplit.length; a++) {
                //Splits rolls that require addition
                var additionSplit = rollSplit[a].split("+");
                var diceTotal = 0;
                for (var e = 0; e < additionSplit.length; e++) {
                    //Splits each individual roll into sides and number of dice
                    var diceSplit = additionSplit[e].split("d");
                    diceTotal = diceTotal + diceRoll(diceSplit[0], diceSplit[1]);
                }
                diceUpdate(rollSplit[a], diceTotal);
            }
        }); 


And here is the portion of code that actually updates the div to display the value:

PHP Code:

        function diceUpdate(dice, total) {
            var rollUpdate = '<span style="color: #000;"><b>' + total + '</b> : ' + dice + '</span><br>';

            $("#diceWindowDiceRolls").append(rollUpdate);
            $("#diceWindowDiceRolls").animate({scrollTop: $("#diceWindowDiceRolls").prop("scrollHeight")}, 10);
        } 


The really interesting thing is that I have single quick rolls setup and they work properly:

PHP Code:

        //Quick Rolls
        $("div.dice").click(function() {
            var sides = $(this).attr("value");
            var roll = diceRoll(1, sides);

            if (roll == sides) {
                var rollColor = '0F0';
            } else if (roll == '1') {
                var rollColor = 'F00';
            } else {
                var rollColor = '000';
            }

            var rollUpdate = '<span style="color: #' + rollColor + ';"><b>' + roll + '</b> : 1d' + sides + '</span><br>';
            
            $("#diceWindowDiceRolls").append(rollUpdate);
            $("#diceWindowDiceRolls").animate({scrollTop: $("#diceWindowDiceRolls").prop("scrollHeight")}, 10);
        }); 


[VIPStephan]

I would imagine that the problem is the loop. You are executing diceUpdate() with all its contents (animation etc.) as many times as rollSplit is long. It’s hard for me to imagine without seeing and playing around myself, though.

[Styles2304]

I'll upload a version shortly. The reasoning for that is that you can enter complex dice rolls with addition and multiple separate rolls. Ex: 2d20+1d12,2d4,3d6. In that case it would run diceUpdate() 3 times to display 3 separate values.

[Styles2304]

I was just playing around with it some more . . . the issue was that it was refreshing the page . . . I forgot to include event.preventDefault() so the form was actually submitting!

[VIPStephan]

D’oh!