Uncaught TypeError: Cannot read property 'value' of null when it exists

Question

so I'm getting this error:

script.js:44 Uncaught ReferenceError: myname is not defined

pointing to this line:

myname = document.getElementById("#text_name").value;

but in the HTML, it exists:

<form class="frm" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

I even tried using query selector:

myname = document.querySelector("text_name").value;

Only use `#` when passing a *selector string*, such as to `querySelector`. `getElementById` does not accept a selector string, it accepts a plain ID. — CertainPerformance, Jan 27 '19 at 22:48
When does that code run? It's not like `.getElementById()` is broken. If it returns `null` it means that the id is not in tthe DOM. — Pointy, Jan 27 '19 at 22:55
After correcting the `#` issue, make sure you aren't trying to find the element before the DOM has loaded the element. Place your ` — Scott Marcus, Jan 27 '19 at 22:55
@Pointy That fixes the issue. I had to add `window.onload = function() {}` — SilentDev, Jan 27 '19 at 22:57
@user2719875 Better than `onload`, just move the script as I suggest above. — Scott Marcus, Jan 27 '19 at 23:00

Obsidian Age · Answer 1 · 2019-01-27T22:51:48.997

2

You've got the # usage back-to-front.

You're looking for:

myname = document.getElementById("text_name").value;

Or:

myname = document.querySelector("#text_name").value;

You don't need the # when referencing an ID with .getElementById(), but you do need it when referencing an ID with .querySelector().

edited Jan 27 '19 at 22:51

answered Jan 27 '19 at 22:48

Obsidian Age

36,816
9
39
58

I tried doing that but it still says myname is undefined. – SilentDev Jan 27 '19 at 22:51
Is your element is dynamically-generated? In that case you'll need to target an element that is static, and work down from there. – Obsidian Age Jan 27 '19 at 22:52
1

doesn't the OP need to use `const`, `var` or `let` isn't that what the error is complaining about? – Get Off My Lawn Jan 27 '19 at 22:54
^ That would be an issue as well. – Obsidian Age Jan 27 '19 at 22:55
@ObsidianAge I fixed it by placing the code inside `window.onload = function() { }`. Thanks. – SilentDev Jan 27 '19 at 22:56
@GetOffMyLawn you're answer worked! (Turns out the original solution and what I said just masked the actual problem, but your answer is right). – SilentDev Jan 27 '19 at 23:38
Glad it worked out for you! – Get Off My Lawn Jan 27 '19 at 23:45

score 1 · Accepted Answer · answered Jan 27 '19 at 23:06

After correcting the # issue, make sure you aren't trying to find the element before the DOM has loaded the element. Place your <script> just before the closing of the body (</body>) because, by the time the parser reaches that point all the elements will have been parsed.

This won't work:

<body>

<script>
  // This won't work because, the HTML element hasn't been reached by the parser yet.
  var myname = document.getElementById("text_name").value;
</script>

<form class="complex_form" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

</body>

Moving the script solves the issue:

<body>

<form class="complex_form" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

<script>
  // This works because now, the HTML element has been reached by the parser.
  var myname = document.getElementById("text_name").value;
</script>

</body>

In addition, if you are trying to get the value of a form field, you've got to wait even longer because you have to give the user a chance to enter a value. For this type of operation, you would have your code tied to an event handler that is triggered after the user has made the entry. So, in reality, the code would be something like this:

<body>

<form class="complex_form" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

<button type="button">Check the input value</button>

<script>
  // Get a reference to the button
  var btn = document.querySelector("button[type='button']");
  
  // Add a click event handler. This handler won't run until someone
  // clicks the button, which would be after someone enters text into the input
  btn.addEventListener("click", function(){
    // This works because now, the HTML element has been reached by the parser.
    var myname = document.getElementById("text_name").value; 
    console.log(myname);
  });

</script>

</body>

Uncaught TypeError: Cannot read property 'value' of null when it exists

2 Answers2