why javascript errors are not detected in asp.net? or what am I doing wrong?

goodk
goodk used Ask the Experts™
on
I have the following code and this has an error because when I do not call this code the application runs fine.

My question is that how programmers debug or find errors with their javascript code while using asp.net (version 2010 express)

 function adjustBackGround(ix) {
            if (ix <= 0) {
                document.getElementById("transbox").style.width = "15px"; return;
            }
            if (ix <= 1) {
                document.getElementById("transbox").style.width = "25px"; return;
            }
            if (ix <= 9) {
                document.getElementById("transbox").style.width = "30px"; return;
            }
            if (ix <= 99) {
                document.getElementById("transbox").style.width = "35px"; return;
            }
            if (ix <= 999) {
                document.getElementById("transbox").style.width = "40px"; return;
            }

            return

        }
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
How are you calling it in your asp.net code?

Author

Commented:
function timeMsg() {
            var t = setTimeout("timeMsg()", 2000);
            //  alert(parseInt(document.getElementById("Count").innerText));
            ix = parseInt(document.getElementById("Count").innerText);
            if (ix << 10000) {
                ix = ix + 1;
                adjustBackGround(ix);
                document.getElementById("Count").innerText = ix;
            }
        }
Dale BurrellDirector

Commented:
Debugging javascript has nothing to do with asp.net. One is client side, one is server side. Use Firefox with the Firebug to inspect and debug your javascript.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
If you are using IE as your default browser, then you can debug JS within VS. You can set breakpoints on the JS code and use the Immediate Window just as you would in regular .NET development.

screenshot
If you are using another browser as your default, then you'll need to use something like what dale_burrell suggests.

Author

Commented:
thanks, I am using safari;   I see how to turn the debugger on;  

This is strange that the code is not executing the following line and does not have javascript error either,
 document.getElementById("Count").innerText = ix;

I removed all the returns from the sub but still the problem persisted.

The problem goes away when I moved this line above the call
                 document.getElementById("Count").innerText = ix;
                 adjustBackGround(ix);

strange; I do not understand!!
               
ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
Did you really intend to do a bit shift operation?

if (ix << 10000) {

Open in new window


"<<" is the left-shift operator.
Dale BurrellDirector
Commented:
Is the element with ID="Count" a regular HTML tag or an ASP.NET control? i.e. have you checked in the HTML rendered at the browser that there is a control with id="Count".

Personally I would do:

var TempObj = document.getElementById("Count");
if (TempObj != null) TempObj.innerText = ix;
ǩa̹̼͍̓̂ͪͤͭ̓u͈̳̟͕̬ͩ͂̌͌̾̀ͪf̭̤͉̅̋͛͂̓͛̈m̩̘̱̃e͙̳͊̑̂ͦ̌ͯ̚d͋̋ͧ̑ͯ͛̉Glanced up at my screen and thought I had coded the Matrix...  Turns out, I just fell asleep on the keyboard.
Most Valuable Expert 2011
Top Expert 2015

Commented:
dale_burrell may be onto something, but if you say that the error disappears when you swap the ordering of the lines, then I believe the error is within the adjustBackGround method itself. So the question would then be, "Is the element with ID='transbox' a regular HTML tag or an ASP.NET control?"
nishant joshiTechnology Development Consultant
Commented:
there are inbuilt debugger in visual studio.

if you are using vs2008 then create an indivisual js file and not declare any function or script in html.just add whole script file and in script file you can debug it.  

for vs2010 all facilities available....

Regards,
nishant

Author

Commented:
Oh, thanks for this overwhelming help

here is the code, I want to remove the red background and the count if 0 or less and I want to expand the background before displaying the count number


<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        div.background
        {
            width: 50px;
            height: 25px;
            background: url("../Pictures/Icons/Envelope.png");
            border: 1px solid black;
        }
       
        div.transbox
        {
            width: 30px;
            height: 22px;
            margin: 0px 9px;
            background-color: red;
            border: 0px solid red;
            vertical-align: top;
            color: White;
            font-size: small;
            text-align: center;
            font-weight: bold;
            opacity: 0.9;
            filter: alpha(opacity=90); /* For IE8 and earlier */
        }
       
       
       
        .rtop, .rbottom
        {
            display: block;
            background: white;
        }
        .rtop *, .rbottom *
        {
            display: block;
            height: 1px;
            overflow: hidden;
            background: red;
        }
        .r1
        {
            margin: 0 5px;
        }
        .r2
        {
            margin: 0 3px;
        }
        .r3
        {
            margin: 0 2px;
        }
        .r4
        {
            margin: 0 1px;
            height: 2px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function timeMsg() {
            var t = setTimeout("timeMsg()", 2000);
            //  alert(parseInt(document.getElementById("Count").innerText));
            ix = parseInt(document.getElementById("Count").innerText);
          //  alert(ix);
            if (ix <= 10000) {
                ix = ix + 1;
                 document.getElementById("Count").innerText = ix;
               adjustBackGround(ix);
            }
        }

        function adjustBackGround(ix) {
            if (ix <= 0) {
                document.getElementById("transbox").style.width = "0px";
            }
            if (ix <= 1) {
                document.getElementById("transbox").style.width = "25px";
            }
            if (ix <= 9) {
                document.getElementById("transbox").style.width = "30px";
            }
            if (ix <= 99) {
                document.getElementById("transbox").style.width = "35px";
            }
            if (ix <= 999) {
                document.getElementById("transbox").style.width = "40px";
            }

           

        }

        function trim(stringToTrim) {
            return stringToTrim.replace(/^\s+|\s+$/g, "");
        }

    </script>
</head>
<body onload="timeMsg()">
    <div class="background">
        <div class="transbox">
            <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
            </b></b>
            <div id="mailrecieved">
                <span id="Count">-1</span></div>
            <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
            </b></b>
        </div>
    </div>
</body>
</html>
nishant joshiTechnology Development Consultant

Commented:

function adjustBackGround(ix) {
            if (ix <= 0) {
                document.getElementById("transbox").style.width = "15px"; return;
            }
            if (ix <= 1) {
                document.getElementById("transbox").style.width = "25px"; return;
            }
            if (ix <= 9) {
                document.getElementById("transbox").style.width = "30px"; return;
            }
            if (ix <= 99) {
                document.getElementById("transbox").style.width = "35px"; return;
            }
            if (ix <= 999) {
                document.getElementById("transbox").style.width = "40px"; return;
            }

            return;

        }

Open in new window

nishant joshiTechnology Development Consultant

Commented:
and you cant use as reference...of ix;
use assignment...

function timeMsg() {
            var t = setTimeout("timeMsg()", 2000);
            //  alert(parseInt(document.getElementById("Count").innerText));
            ix = parseInt(document.getElementById("Count").innerText);
            if (ix << 10000) {
                ix = ix + 1;
                ix=adjustBackGround(ix);
                document.getElementById("Count").innerText = ix;
            }
        }

Author

Commented:
ix=adjustBackGround(ix); is not needed.

In debug it jumps out when it hit style assignment?  How to fix this problem.
            document.getElementById("transbox").style.width = "2px";
Dale BurrellDirector

Commented:
Again if you want to write safe code try:

var TempObj = document.getElementById("transbox");
if (TempObj != null) TempObj.style.width = "2px";

Have you checked that there is an element with id="transbox" in the rendered HTML?

Author

Commented:
The code is in the thread;

It is a class in css;  not an ID.  So not sure how to do this - kindly take a look at the code

All I want to do is display a number over an image and be able to remove the number and the .transbox when the number is zero

div.transbox
        {
            width: 30px;
            height: 22px;
            margin: 0px 9px;
            background-color: red;
            border: 0px solid red;
            vertical-align: top;
            color: White;
            font-size: small;
            text-align: center;
            font-weight: bold;
            opacity: 0.9;
            filter: alpha(opacity=90); /* For IE8 and earlier */
        }
Dale BurrellDirector

Commented:
Well that explains it then :) you can't use getElementById if it doesn't have an id!

Why not just add an id of 'transbox" to that div?

To identify an element by class name is quite tricky, in fact I'd strongly suggest using jQuery if you have to as that takes all the hard work out of it.

If you have not choice but to be able to get the element based on class name and you cannot use jQuery then here is a native script... be warned... its not simple.

http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

Oh, and you won't necessarily get a single result as its possible to have many elements with the same class whereas thats not the case with id's.

Author

Commented:
Oh crap!!
Can you expert beat up the browser designer.  

I wonder how the browser apply classes on to the elements without identifying them?


At any rate, in my case I have to make a round trip to the server to fetch the count, so I will pack a different class for the  div which is needed.  Is that wise?


.


Dale BurrellDirector

Commented:
As I said you can identify them - its just harder for your purposes - each browser has its own internal mechanisms to speed up its rendering but thats not publicly available.

Class has a totally different function and meaning to id, id is intended for uniquely identifying a specific element as you are trying to do. Class is intended to apply a set of CSS to an element, therefore there is no restriction as to how many elements have a given class. Its not however intended to uniquely identify an element hence not suitable for what you are doing in itself.

That said, its pretty simple to add jQuery to the site, and jQuery does allow you to find the element you are after very easily.

I don't understand what you say about the different class - add whatever classes you want - that doesn't solve your problem though.

Why not just add an id to the div in question? That solves the problem very easily I think?

Author

Commented:
thanks, I am not sure how this would apply,

can you kindly just show my code how it would be modified to work??  thanks
Director
Commented:
<body onload="timeMsg()">
    <div class="background">
        <div class="transbox" id="transbox">
 

Author

Commented:
thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial