Real-Time JavaScript Debugger or Coding Help

jlimited · 05-06-2009, 04:47 AM

Hello,

Does anyone know of a real-time JavaScript Debugger? I am trying to find out why this script is not working correctly, but can't find something that will watch the variables.

The form is to allow users to rank 1 - 5 of the 9 items.

Thanks
jlimited

Code:

<html>
<head>
<script type="text/javascript">
var newvalue = '0';
var oldvalue = '';

function Reset_Form()
{
    newvalue = '0';
    document.getElementById("submitbutton").disabled = true;
    return newvalue;
}

function Check_Data(id,oldvalue,isover)
{
    if (((id.value - 0) == id.value) && (id.value.length > 0))
    {
        if (oldvalue.length > 0) {
            isover = parseFloat(isover) - Math.pow(5,oldvalue);
        }
        
        newvalue = parseFloat(isover) + Math.pow(5,id.value);
    }

    if (newvalue == '3905')
    {
        document.getElementById("submitbutton").disabled = false;
    }
    else
    {
        document.getElementById("submitbutton").disabled = true;
        return newvalue;
    }
}

function remember_old(id)
{
    return oldvalue = id.value;
}


</script>
</head>
<body>
<form action=process.php method=post>
<input type=text name=item1 id=item1 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item2 id=item2 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item3 id=item3 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item4 id=item4 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item5 id=item5 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item6 id=item6 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item7 id=item7 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item8 id=item8 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=text name=item9 id=item9 onblur="Check_Data(this,oldvalue,newvalue);" onfocus="remember_old(this);"><br>
<input type=submit value="Submit Rankings" id="submitbutton" DISABLED> <input type=reset value="Reset Form" onclick="Reset_Form();">
</form>
</body>
</html>

Old Pedant · 05-06-2009, 07:04 AM

You can always create a <DIV ID="DUMP"> and then use document.getElementById("DUMP").innerHTML = xxxx to display things as they happen.

But really, this whole thing looks HORRIBLY error-prone to me.

What's to prevent somebody from entering "zam" or "999999" into one of those field??

Old Pedant · 05-06-2009, 07:44 AM

Why not K.I.S.S.????

Code:

<html>
<head>
<script type="text/javascript">
function check(fld)
{
    var form = fld.form;
    var rank = parseInt(fld.value);
    fld.value = rank; // in case user typed "3 bats"
    if ( isNaN(rank) || rank < 1 || rank > 5 )
    {
        fld.value = "";
        return;
    }
    // rank is 1 thru 5

    // build list of already taken ranks from all fields
    // except the current one:
    var fldnum = parseInt(fld.name.substring(4));
    var ranks = "";
    for ( var n = 1; n <= 9; ++n )
    {
        if ( n != fldnum ) ranks += form.elements["item"+n].value;
    }
    // and now just see if that one is taken
    if ( ranks.indexOf(rank) >= 0 )
    {
        alert("That rank is already taken");
        fld.value = "";
        return;
    }
    // nope...not taken...
    ranks += rank; 
    form.submitbutton.disabled = ( ranks.length != 5 );
}
</script>
</head>
<body>

<form action=process.php method=post>
<input type=text name=item1 onchange="check(this);"><br>
<input type=text name=item2 onchange="check(this);"><br>
<input type=text name=item3 onchange="check(this);"><br>
<input type=text name=item4 onchange="check(this);"><br>
<input type=text name=item5 onchange="check(this);"><br>
<input type=text name=item6 onchange="check(this);"><br>
<input type=text name=item7 onchange="check(this);"><br>
<input type=text name=item8 onchange="check(this);"><br>
<input type=text name=item9 onchange="check(this);"><br>

<input type=submit value="Submit Rankings" name="submitbutton" DISABLED> 
<br>
<input type=reset value="RESET">
</form>
</body>
</html>

Philip M · 05-06-2009, 09:11 AM

Old Pedant - There is a slight snag in that if the user correctly fills in ranks 1-5 the Submit button then becomes enabled, but the user can then erase one or more rankings or press the Reset button and the Submit button is still enabled.

Suggested revised code:-

Code:

<html>
<head>
<script type="text/javascript">
function check(fld) {
    var form = fld.form;
    var rank = parseInt(fld.value);
    fld.value = rank; 
    if ((/[^1-5]/g.test(rank)) || (rank == ""))  {
    fld.value = " ";  // space
    alert ("Only numbers 1 - 5 are valid and 5 boxes must be filled ");
     }
    // rank is 1 thru 5

    // build list of already taken ranks from all fields except the current one:

    var fldnum = parseInt(fld.name.substring(4));  // item1 etc.
    var ranks = "";

    for ( var n = 1; n <= 9; ++n ) {
        if ( n != fldnum ) ranks += form.elements["item"+n].value;
    }

    // and now just see if that one is taken
    if ( ranks.indexOf(rank) >= 0 )  {
        alert("That rank is already taken");
        fld.value = "";
        return;
    }
    // nope...not taken...
    ranks += rank; 
    ranks = ranks.replace(/[^1-5]/g,"");
    form.submitbutton.disabled = ( ranks.length != 5 );
}

function clearIt(which) {
which.value = "";
}


</script>
</head>
<body>

RANK FIVE ITEMS OUT OF NINE WITH SCORES 1-5<br>

<form name = "myform" action=process.php method=post>
ITEM 1 <input type=text size = "1" maxlength = "1" name = "item1" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 2 <input type=text size = "1" maxlength = "1" name = "item2" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 3 <input type=text size = "1" maxlength = "1" name = "item3" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 4 <input type=text size = "1" maxlength = "1" name = "item4" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 5 <input type=text size = "1" maxlength = "1" name = "item5" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 6 <input type=text size = "1" maxlength = "1" name = "item6" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 7 <input type=text size = "1" maxlength = "1" name = "item7" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 8 <input type=text size = "1" maxlength = "1" name = "item8" onfocus="clearIt(this)"; onblur="check(this)"><br>
ITEM 9 <input type=text size = "1" maxlength = "1" name = "item9" onfocus="clearIt(this)"; onblur="check(this)"><br>

<input type=submit value="Submit Rankings" name = "submitbutton" DISABLED> 
<br>
<input type=reset value="RESET" onclick = "document.myform.submitbutton.disabled = true">
</form>
</body>
</html>

jlimited · 05-06-2009, 01:32 PM

Both examples work great. And what both of you did makes since. Thanks.

jlimited · 05-07-2009, 02:36 AM

Here is another question and I am not coming up with a good answer.

Using Old Pedant code, I enter the 1 - 5 into the fields. Then I clear one of the numbers as if I am changing my ranking to another option. The Submit button is still enabled.

From what it looks like the code throws out blank fields at the beginning and so the ranks.length statement at the end is still 5 even though there are only four items selected.

What would be the best method of locking the submit button until 5 fields have unique values in them?

Thanks
jlimited

Philip M · 05-07-2009, 11:55 AM

I dealt with this in Post#4. Have you tried it?

jlimited · 05-07-2009, 01:50 PM

I have. As a user of the site, I was receiving a lot more pop-up error message with your code, than using the Old Pedant code.

For example:
When I enter 1 - 5 into the first five boxes using the tab key to advance between them. I get down to Item6 and the submit button is active. If I continue using the tab key to advance through the rest I get a pop-up for each time, because the fields are blank.

When I try to re-rank Item4 (which = 4) and Item5 (which = 5) and I clear Item5 and Shift + Tab up to Item4, I get another pop-up when I leave Item5 for it being blank. Then I change Item4 to be 5 and Tab back to Item 5 and change it to 4.

Then I just randomly switch between fields using my mouse. And a "NaN" appears in one of the boxes and I get several pop-ups "That number is already taken" as well as "Only Numbers 1 - 5 are allow".

All in all there are way to may times that the user has to acknowledge a pop-up for doing what I feel are normal functions of this type of site. In my mind the user does not need to see a pop-up every time they change their rankings.

I got the Old Pedant to give me the NaN, but it cleared it within a blink of an eye.

The only issue that I have with Old Pedant code is that is does not disable the submit button if I clear a rank from a previous field.

Thanks
jlimited

venegal · 05-07-2009, 02:11 PM

Well delete the alert then, if you don't like it.

What would you have done with that Javascript debugger, if you are willing to use a whole different script with possible errors, just because you don't want to modify one line of code in a script that's working perfectly well?