JavaScript, Doctype, and Firefox

Question

I have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Function test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
    <script type="text/javascript">
        function doFunction(towindow)
        {
            towindow.value='2';
        }   
    </script>
</head>
<body>
    <div>
        <textarea id="outputarea" rows="6" cols="60"></textarea> <br />
        <button type="button" onclick="doFunction(outputarea)">doFunction </button>
    </div>
</body>
</html>

This does not work. When the button is clicked, then nothing happens.

If I remove the <!DOCTYPE .... then everything works fine.

I would like to keep the DOCTYPE for validation and I have found this exact declaration from the W3schools website. The code does validate. I am using Firefox 10.0. When I use Chrome 27.0.1453.116 the problem does not occur. Also, the problem does not occur when I use Explorer 10.

It seems like there is a problem between the JavaScript, the DOCTYPE declaration, and Firefox.

What is the problem? How might I fix this?

(I see other questions (see for example this-1, this-2, this-3, this-4) with some of the same question, but they didn't help)

Are you the one downvoting any answers that don't work for you? You're only supposed to downvote answers you think are really bad or unconstructive. It's not nice to downvote all the answers that didn't work for you; simply upvote ones that *are* helpful to you. — Matt Browne, Jun 23 '13 at 01:26
@MattBrowne This is the weekend and all the amateurs are out. It's why I rarely come here on the weekend anymore. — Rob, Jun 23 '13 at 01:29
@Rob thanks for the tip. I'll just flag his question if he keeps it up. — Matt Browne, Jun 23 '13 at 01:30
@MattBrowne: No no ... I am not down voting. Please don't think that I did. As you can see, I have quite a bit of experience on the Math.SE. I don't down vote without giving a comment. — Thomas, Jun 23 '13 at 02:07
@MattBrowne: Please check and see that my reputation is 352 which it was before I posted this question. — Thomas, Jun 23 '13 at 02:08
Thanks, and sorry for the suspicion, I just wasn't sure who else would be going around downvoting all the answers here. — Matt Browne, Jun 23 '13 at 02:14

Matt Browne · Accepted Answer · 2013-06-23T17:29:54.780

The problem is not the DOCTYPE; it may be that Firefox 10 (which is pretty old now BTW) is interpreting the code differently depending on the DOCTYPE, but the real problem is your Javascript.

Your code onclick="doFunction(outputarea)" is not really correct; some browsers will guess that you want the element with the ID outputarea but that's not standard behavior. Your should do something like this instead:

<script type="text/javascript">
    function doFunction(towindowId)
    {
        var towindow = document.getElementById(towindowId);
        towindow.value='2';
    }   
</script>
...
<button type="button" onclick="doFunction('outputarea')">doFunction </button>

Also, you should always check for Javascript errors in Firefox's error console - I tested your original code in Firefox 10 and got the error "Error: toWindowId is not defined".

FYI, XHTML (strict mode or otherwise) is rarely needed; you might want to consider just the regular HTML5 doctype, <!DOCTYPE html>, unless you have a specific reason for needing XHTML. See this article: http://www.webdevout.net/articles/beware-of-xhtml. Also note that the W3Schools info is often not up-to-date with current trends and practices.

I have personally verified that this code works in Firefox 10; why the downvote? — Matt Browne, Jun 23 '13 at 01:27
Thank you for this answer (+1). I will have to try this. I greatly appreciate your time. **I did not down vote you.** — Thomas, Jun 23 '13 at 02:11
Thanks again for the answer. It works now and I even got it to validate as HTML 4.01 strict. — Thomas, Jun 23 '13 at 16:36

Rob · Answer 2 · 2013-06-23T01:19:01.953

0

A doctype is required for all new web pages. You aren't serving your pages as XHTML so using the doctype you have now makes no sense. Use the new one because it puts all browsers back to IE6 in standards mode where you want to be and it's shorter and easier to remember. <!DOCTYPE html>

Firefox 10 is an antique and I don't know why you think anyone uses it. Ignore it. The current version is 21.

So just changing your first two lines to this and it works in the current version of Chrome and Firefox:

<!DOCTYPE html> <html>

Didn't look at IE.

Also, Remove the meta element. That's only for people who are viewing your page saved to the desktop and not over the internet (unless you need that). Also, it's no longer necessary for the type attribute for the script tag.

edited Jun 23 '13 at 01:19

answered Jun 23 '13 at 01:11

Rob

14,746
28
47
65

@conceptdeluxe If you want to downvote me because you were downvoted cause your code is complete nonsense and antiquated, that's fine, I don't care, but your answer is wrong, false and misleading; not to mention antiquated. – Rob Jun 23 '13 at 01:23
No I'm downvoting you as you did not get the point that he wants to use FF10 and you just say its antique and it works in latest FF ... that it works in latest FF is something I stated already (and where i missed the point too before) – conceptdeluxe Jun 23 '13 at 01:25
I am not abusing it - your answer is not a solution for the problem at all – conceptdeluxe Jun 23 '13 at 01:27
@conceptdeluxe You obviously do not understand the points I was trying to make as that was helpful advice to newbies like you who obviously don't know how the modern web works. – Rob Jun 23 '13 at 01:27

JavaScript, Doctype, and Firefox

2 Answers2