Member Avatar for cjohnweb

Hey there,

I'm still kinda learning JS. I can't figure this one out. I googled and discovered the issues is with placing the <!DOCTYPE html> tag at the top, but how to resolve the issue?

I've a document with some Javascript and JQuery in it, it works great! I add a <!DOCTYPE html> to the very top of the document and the Js stops working entirely.

I used firebug, Tells me I got an error - X is not defined. (Where X is called from an inline function ie <input onclick="functionname(X)" [...] />)

So how do I 'define' this thing...its just passed to a functions - it's not actual variable or anything, so I'm a little confused.

Let me know if you want to see me code, I was kind of hoping someone knows the HTML 5 doctype and what it requires as far as JS is concerned.

Thanks

  • 2 Contributors
  • 5 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

The doctype control parsing of the page in order to display it correctly. Can you recheck that you don't have any invalid HTML element tags in your HTML page?

Member Avatar for cjohnweb

I just figured it out. When I added the <!DOCTYPE html> at the top, I have to change the JS syntax. In the input tag, I had:

<input type="text" name="sometag" value="" onKeyPress=\"return disableEnterKey(event,text);\" />

I changed it to

<input type="text" name="sometag" value="" onKeyPress=\"return disableEnterKey(event,'text');\" />

In some of my code I would pass a variable to a js function:

function something(var){

alert($var); // doesn't work right

var newvar = var.id;

alert(newvar); // this one works

}

Now it's the opposite:

function something(var){

alert($var); // works just fine now

}

These are just a few minor details I had to iron out. Things seam to be working fine now. I wish I knew what to expect...if the doctype changes the syntax of the code, maybe there are different versions of Javascript. Something that is not covered in any tutorial I've read.

Thanks for the help.

Member Avatar for Taywin

Just to clarify, doctype doesn't change the syntax but enforces the correct syntax. Browsers nowadays ignores incorrect syntax and allow it to pass. However, doctype will tell the browsers to look for specific syntax which is correct. This include both tag syntax. In your case, the passing argument is supposed to be a string but you pass it in as if it is a variable. Normally, the browser would try variable first. If it couldn't find a reference to a variable, it uses the argument as a string. As a result, it renders OK without doctype. That's all. :)

Edited by Taywin because: n/a
Member Avatar for cjohnweb

This is where it gets confusing to me. That completely makes sense. But from what I've observed that doesn't seam to be the case. I am talking from my very limited experience with JS, of course.

Here is the main reason: When I was first coding this project, I had no DOCTYPE specified, I asked a few questions here on Daniweb & someone had said that writing JS functions were just like PHP. I took a shot in the dark - I placed apostrophes around the text I was passing to my JS function (Like you might with PHP):

<input type="text" name="addnew" value="" onKeyPress="return disableEnterKey(event,'some text here');" />

<input type="button" value="Add" onclick="add_option('other text here');">

It didn't work...now I find that this will not work without a <!DOCTYPE html> tag. In order for this to work without a DOCTYPE you must take away the apostrophes like so:

<input type="text" name="addnew" value="" onKeyPress="return disableEnterKey(event,some text here);" />

<input type="button" value="Add" onclick="add_option(other text here);">

When I added the DOCTYPE, the code that was working then stopped, so I had to go back, mess with things and look at the errors Firebug reported and so on until things started working again. One of the main things was adding the apostrophes back in, otherwise I would get some sort of 'other text here not specified', as if I was trying to pass an unset variable or something.

Maybe I'm completely wrong and I missed something. Maybe someone a little more familiar with JS could try to verify what I'm saying. If this is the case, it kind of goes back to my original though - are there different versions of JS? Ideas? Maybe this is already covered in a tutorial or JS book? If so, where? page #?

Thanks for your input Taywin. You have any further input?

:)

Member Avatar for Taywin

Thanks for explaining how you got your code work in the past. That's an interesting information!

Anyway, below is what I tried on a simple HTML page (.html) without using a Doctype.

<html>
<head>
  <title>Test JS</title>
  <script type="text/javascript">
  function show_my_alert(str) {
    alert(str)
  }
  </script>
</head>

<body>
  <input type="button" value="Show Alert 1" onclick="show_my_alert(do it and see)">
  &nbsp;&nbsp;&nbsp;&nbsp;
  <input type="button" value="Show Alert 2" onclick="show_my_alert('do it and see')">
</body>
</html>

If you try to click the "Show Alert 1" button, you will see nothing because it is "syntax error" in JavaScript. The reason is that the text passing in is not read as text. The second button is the correct format which is supposed to be used in calling a javascript function.

Now, you said you are using JQuery to implement the function? If so, this may be the convenient part implemented in JQuery to due with function arguments. I am not sure about JQuery because I do not use the library. I am sorry, but I am not a big fan of it. It makes life easier but at the same time it is too high level for me to use. I like to dig and implement stuff at lower level --> more control. :P

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.