HTML/JS help, Cannot find error Options

[Christian J]

My browser's script console didn't spot the innerHtml typo either. Maybe it's because an author defined object or property might be named "innerHtml", so it's not technically a syntax error.

[pandy]

Yes, I think so. I didn't get an error for that either.

[pandy]

What do you mean by originally? The braces weren't fine in your original post, but innerHTML was written correctly.

What debugger missed the braces and the quotes? Maybe you used the HTML validator. It doesn't check JavaScript.

They were logically ok, but I might have mistyped(as in wrong place) one of them, because I put them back where I thought I had out them originally and thats when the code worked perfectly, along with the innerHtml typo.

Yes I used the Html validator because I didn't know it won't check the JavaSript ...I also used Firebug. A far as I could understand there were no errors from Firebug, but it was hard to understand the interface .

I was pretty much banging around on my own. Thank God I decided to post the issue here otherwise I would ave been at it for the next week . Made a brand-new account for that sole purpose:)

I mean the code you originally posted, surely you must have gotten errors for that?

The HTML validator can give you errors for your embedded scripts, but that's because it sees them as HTML and some characters, like slashes, can trigger errors. Can be good to know.

I'm not comfortable with Firebug either. Christian, has FF removed the old JS console, or is it just me that can't find it? K-Mel still has it and that's what I use most of the time.

[Christian J]

Christian, has FF removed the old JS console, or is it just me that can't find it? K-Mel still has it and that's what I use most of the time.

FF uses something called Developer Tools, that you can access either by right clicking on the page and choose Inspect Element or from Tools > Web Developer > ... I don't think it's the same as K-Mel's Error Console.

[pandy]

I don't get any of those things to show me JS errors. I may remember wrong, but I think FF used to have a normal error console too. Maybe it's been gone for years. I only use FF when asked to.

[Christian J]

I don't get any of those things to show me JS errors.

Click on the Console tab, and JS if necessary. But I'm not too familiar with it.

I may remember wrong, but I think FF used to have a normal error console too. Maybe it's been gone for years.

Yes I think so.

[CharlesEF]

I use Firefox with Firebug installed also. It has an error console, script debugger, NET tab so I can see results of GET and POST among other things, CSS and DOM editors. In fact I don't even use/understand everything it has to offer.

[pandy]

Click on the Console tab, and JS if necessary. But I'm not too familiar with it.

In Firebug? Console and Script are on the same level so it's either or. No JS tab. If I click Script I get ta lot of info but not about errors. If a page doesn't contain JS I get the below, so it seems it doesn't report errors...

No Javascript on this page

If <script> tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).

[pandy]

FYI I don't find anything useful in Iron either (what a surprise...). Does Chrome have an error console? Otherwise what do you use? I think I'm the only one who uses K-Mel here and it seems it's the only modern browser I have that still offers it. Has IE still got it? My version is so old.

[CharlesEF]

If we are talking about the same thing then yes, in Firebug. Let's take the very first OP posted code as a sample. First I load Firefox, then I turn on Firebug (either by menu or icon). I have Firebug set to full screen behind Firefox. Then I paste the code into a HTML page and load it. Once the page loads I see a superscript number 1 next to the Firebug icon. I click on that number and I'm taken to Firebug with the console tab selected on the first menu bar. On the 2nd menu bar I have 'All' selected. I see this error message:

CODE

SyntaxError: missing; before statement
    "Your age is "+age" years"<br>
    ------------------^

True, the error message is not correct but after I look at it I see the + sign is missing, so I fix the source and reload the page. I see the superscript 1 again so I click on it. I see this error message:

CODE

SyntaxError: expected expression, got ';'
    "Job 3 :" + academics<br>;
    -------------------------^

Again, the error message is not correct but after I look at it I see this block of code is wrong:

CODE

"Hello"+fullname<br>
"Your age is "+age+" years"<br>
"Your qualification is" + qual<br>
"Your selected job types are"<br>
"Job 1 :" + it<br>
"Job 2 :" + marketing<br>
"Job 3 :" + academics<br>;

It should be:

CODE

"Hello"+fullname + "<br>" +
"Your age is "+age+" years<br>" +
"Your qualification is" + qual + "<br>" +
"Your selected job types are<br>" +
"Job 1 :" + it + "<br>" +
"Job 2 :" + marketing + "<br>" +
"Job 3 :" + academics + "<br>";

So I fix the source and load the page again. This time the page loads and no superscript numbers appear. Now I start to test the page. First I want to check validation so I click on the 'Show Information' button. The page blanks out and I see 'Working'. This means document.write was used somewhere and it blanked out the original page so I look at the source to find and comment it out. Now I reload the page again and click on the same button. I see 3 alert messages and this text in the 'info' <div>:

CODE

Hello[object HTMLInputElement]
Your age is years
Your qualification isGraduate
Your selected job types are
Job 1 :None
Job 2 :None
Job 3 :None

At this point I realize there are 2 more errors. First is the '[object HTMLInputElement]' and the 2nd is a logic error. I mean this text should not appear when validation fails. The first error is because the wrong variable name was used. 'fullname' is not a valid variable, it should be 'name'. The 2nd error takes more time because the code is poorly formatted (very hard to read). I do find that this block of code is missing the ending } character:

CODE

if (chk==false){
var qual=document.getElementById("under").checked;
var it=document.getElementById("it").checked;
var marketing=document.getElementById("marketing").checked;
var academics=document.getElementById("academics").checked;

So I fix it by moving 1 of the 2 ending } characters. Again, I reload the page and test the validation again. Now I see this test in the 'info' <div>:

CODE

Hello
Your age is years
Your qualification isGraduate
Your selected job types are
Job 1 :None
Job 2 :None
Job 3 :None

I see that a program logic error remains because this text should not appear. I also realize there is another error. This line 'Your qualification isGraduate' should be 'Your qualification is' because no 'Qualification' radio button was selected.

At this point it would depend on what I had going on with other projects if I continue or not. I mean the lack of good code formatting makes the code hard to read so I would need to spend some time going over it.

When I first read this post you and Christian were already working on it so I stayed out.

Now, are we talking about the same thing?

[Christian J]

Click on the Console tab, and JS if necessary. But I'm not too familiar with it.

In Firebug?

No, I was talking about the preinstalled Developer Tools. Firebug is an extension, AFAIK.

[Christian J]

Does Chrome have an error console?

Yes.

Otherwise what do you use?

Since there can be unique errors in a buggy browser you need to check them all.

[pandy]

Click on the Console tab, and JS if necessary. But I'm not too familiar with it.

In Firebug?

No, I was talking about the preinstalled Developer Tools. Firebug is an extension, AFAIK.

No, I haven't installed any extensions. Firebug shows up under Web Developer. I don't find what you mean. Here's what I've got.

[pandy]

Otherwise what do you use?

Since there can be unique errors in a buggy browser you need to check them all.

I check that it works.

[pandy]

If we are talking about the same thing then yes, in Firebug. Let's take the very first OP posted code as a sample. First I load Firefox, then I turn on Firebug (either by menu or icon). I have Firebug set to full screen behind Firefox. Then I paste the code into a HTML page and load it. Once the page loads I see a superscript number 1 next to the Firebug icon. I click on that number and I'm taken to Firebug with the console tab selected on the first menu bar. On the 2nd menu bar I have 'All' selected. I see this error message:[code]SyntaxError: missing; before statement
<snip>

Now, are we talking about the same thing?

Yes, but I don't manage to make FB do what I want. I'll try to follow your description step for step.

[pandy]

If we are talking about the same thing then yes, in Firebug. Let's take the very first OP posted code as a sample. First I load Firefox, then I turn on Firebug (either by menu or icon). I have Firebug set to full screen behind Firefox. Then I paste the code into a HTML page and load it. Once the page loads I see a superscript number 1 next to the Firebug icon. I click on that number and I'm taken to Firebug with the console tab selected on the first menu bar. On the 2nd menu bar I have 'All' selected. I see this error message:[code]SyntaxError: missing; before statement

Didn't get far. Don't get any superscript number. When I open the console I get a blank page. I've created errors in the script, so it isn't that there are none.

[Christian J]

No, I haven't installed any extensions. Firebug shows up under Web Developer. I don't find what you mean. Here's what I've got.

I get the same menu, but without Firebug. Maybe it's not included in the Firefox ESR releases (that I use). If you click e.g. the Toogle Tools option you should see the same thing as me (unless Firebug changes things?).

Opera12 has a good javascript error console too.

[Christian J]

Didn't get far. Don't get any superscript number. When I open the console I get a blank page. I've created errors in the script, so it isn't that there are none.

Have you tried reloading the page after opening Firebug?

[CharlesEF]

Christian is correct. If you turn on Firebug after you load the page then you must reload the page in order for Firebug to kick in. I replaced the lack of the + sign error and this is what I see:

Notice the 1 next to the Firebug icon? BTW, I did find the problem with the radio and check boxes. This section:

CODE

if (chk==false){
var qual=document.getElementById("under").checked;
var it=document.getElementById("it").checked;
var marketing=document.getElementById("marketing").checked;
var academics=document.getElementById("academics").checked;}

needs to be changed to:

CODE

if (chk==true){
var qual=document.getElementById("under").checked;
var it=document.getElementById("it").checked;
var marketing=document.getElementById("marketing").checked;
var academics=document.getElementById("academics").checked;}

I also found the reason why results were displayed when the validation failed. That if() section that I thought was missing the closing } character had to be moved back to the bottom of the code. Now there are 2 closing } characters at the end like the original code showed. Now when validation fails the only results I see is an actual error message, that I never saw before. This is the section of code:

CODE

if (chk==true){
var qual=document.getElementById("under").checked;
var it=document.getElementById("it").checked;
var marketing=document.getElementById("marketing").checked;
var academics=document.getElementById("academics").checked;

I did 1 more test, the 'innerhtml'. Firebug reported no error and the 'info' <div> didn't show any results when the 'Show Information' button was clicked.

One more thing, because of browser caching I always use 'Ctrl+F5' 2-3 times to reload a page after making javascript changes. To be sure I'm not working with a cached version.

[pandy]

Yes, all debuggers require reloading if they weren't open from start.

If you click e.g. the Toogle Tools option you should see the same thing as me (unless Firebug changes things?).

Looks very similar to Firebug to me. I clicked Console and then JavaScript.

CODE

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.

That's all I get.