5

I am using Chrome 30.0.1599.101 and have issue with name element: it has no properties.

<html>
<body>
<form>
    <input name="name" id="name" type="text">*<br>
    <input name="pass" id="pass" type="text">*<br>
</form>

<script>

var name = document.getElementById("name");
var pass = document.getElementById("pass");

console.log(name); // no properties
console.log(pass); // everything ok

</script>
</body>
</html>

Why has name element has no properties? It's not only the console issue - the properties are not accessible in the code. However, everything works fine in Firefox browser. Even in the fiddle (by Gurpreet Singh) with the very same code in the same browser everything works. I tried <!DOCTYPE html5> as Uooo suggests, tried to reset the browser, but still no luck on localhost.

Here is a screenshot:

error screenshot

If I change the name name to something else, the properties are visible.

Jan Turoň
  • 26,696
  • 21
  • 102
  • 153

4 Answers4

4

name is already a global property (a property of window), and not only that, it is kinda typed (String). var name = ... is essentially the same as as saying window.name = .... Use another variable name that is actually not taken yet and you should be fine.

nmaier
  • 29,828
  • 5
  • 59
  • 75
  • Ah, here we go: `DOM Level 0. Not part of any standard.` - so it works elsewhere. As I checked, the name is casted to string type as `window.name` should be. All clear now, thanks. – Jan Turoň Oct 23 '13 at 11:36
0

Missing <head> and <title>, maybe that helps, it's invalid HTML without them.

jsfiddle does automatically insert those tags, which could explain why it works there but not locally.

Don't get confused by Green arrow answer, you don't close an input tag, but not the br and vice versa. All single-tags in XHTML need to be closed to be valid, but in HTML4 and HTML5 you don't close any single-tag at all.

Daniel W.
  • 26,503
  • 9
  • 78
  • 128
0

I would suggest following changed version which works as intended for me in

navigator.userAgent
"Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1678.0 Safari/537.36"

Code

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script>
document.addEventListener('readystatechange', function(event) {
    if (event.target.readyState !== "complete") {
        return;
    }
    var name = document.getElementById("name");
    var pass = document.getElementById("pass");
    console.log(name);
    console.log(pass);
}, false);
</script>
</head><body>
<form>
    <input name="name" id="name" type="text">*<br>
    <input name="pass" id="pass" type="text">*<br>
</form>
</body></html>

Explanation

  • script elements should be in the head element of a HTML document.
  • script code dealing with the DOM needs to run after the document is fully loaded.

Implicitly Fixed Issues

  • script code should not run in global scope where var name and pass may clash with existing variables. It now runs in the scope of the anonymous event listener function.

Remaining Problems

  • Use type="password" for password fields.

  • Use the value attribute to default input type values.

  • Better use div elements to layout input elements vertically instead of br elements.

stackunderflow
  • 813
  • 6
  • 17
-1

I don't know if that cause the error but you should at least close your input 

<html>
  <body>
    <form>
        <input name="name" id="name" type="text"/>*<br>
        <input name="pass" id="pass" type="text"/>*<br>
    </form>
  </body>
 </html>

The fiddle works for me too...

Do you have any warnings &/or errors in your chrome console ?

You should also used your script in that function :

<script>
$(function() { //shortcut for document ready

    //Get your elements here otherwise you can't be sure that dom is loaded.

});
</script>

if you don't use jquery then it's quite a mission to detect when dom is loaded if you want a Xbrowser solution, a lot of topic are talking about that.

Heaven42
  • 329
  • 1
  • 13