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

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

        }
goodkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sammySeltzerCommented:
How are you calling it in your asp.net code?
0
goodkAuthor 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;
            }
        }
0
Dale BurrellDirectorCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

käµfm³d 👽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.
0
goodkAuthor 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!!
               
0
käµfm³d 👽Commented:
Did you really intend to do a bit shift operation?

if (ix << 10000) {

Open in new window


"<<" is the left-shift operator.
0
Dale BurrellDirectorCommented:
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;
0
käµfm³d 👽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?"
0
nishant joshiTechnology Development ConsultantCommented:
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
0
goodkAuthor 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>
0
nishant joshiTechnology Development ConsultantCommented:

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

0
nishant joshiTechnology Development ConsultantCommented:
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;
            }
        }
0
goodkAuthor 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";
0
Dale BurrellDirectorCommented:
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?
0
goodkAuthor 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 */
        }
0
Dale BurrellDirectorCommented:
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.
0
goodkAuthor 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?


.


0
Dale BurrellDirectorCommented:
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?
0
goodkAuthor 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
0
Dale BurrellDirectorCommented:
<body onload="timeMsg()">
    <div class="background">
        <div class="transbox" id="transbox">
 
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
goodkAuthor Commented:
thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.