0

I'm trying to get value from the input box. The id is correct and input is shown. In console it shows an

UncaughtTypeError Uncaught TypeError: Cannot read property 'value' of undefined and links to line 41 but all is correct as I think.

HTML

<input id="numbern" name="nub" placeholder="Your Roll No." class="form-control col-6" autocomplete="off">

Javascript

docsd=document.getElementById('numbern');
console.log(docsd.value);

Can I know what I'm doing wrong?

T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
Ved Nig
  • 57
  • 9
  • _When_ does this JS code execute? – CBroe Oct 29 '20 at 12:19
  • in script tag directly – Ved Nig Oct 29 '20 at 12:21
  • This example works fine for me – expressjs123 Oct 29 '20 at 12:22
  • Where is the script element located, before or after the input element? – CBroe Oct 29 '20 at 12:23
  • 1
    Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – CBroe Oct 29 '20 at 12:23
  • see the js fiddle https://jsfiddle.net/vednig12/Lwa9z6t4/16/ – Ved Nig Oct 29 '20 at 12:24
  • 1
    @CBroe - Wow, I missed the detail in the quoted error. Foolish of me to trust the title. (And thanks for the comment on my answer answering the wrong question! ;-) ) – T.J. Crowder Oct 29 '20 at 12:26
  • You must be executing this JS code before your input element is ready. Try placing your JS code at the bottom, or enclosed in something like a `document.ready` event of jQuery. – Mohit Bhardwaj Oct 29 '20 at 12:26
  • @VedNig - See the answers to [the question](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) that CBroe pointed to. Your question title is incorrect, you're not getting `undefined`, you're getting an **error**. The answers there explain why. – T.J. Crowder Oct 29 '20 at 12:26
  • @CBroe I saw that link before you can see a similar question in my profile. I solved that one in a way cause it's input was loaded after the page. But this one is driving me crazy it seems as simple yet it is not getting.! – Ved Nig Oct 29 '20 at 12:39
  • In your fiddle, you are trying `console.log(document.getElementById('numbern').value);` on line #37, and ` – CBroe Oct 29 '20 at 13:12
  • A code at submit button removed the whole HTML and Then JS code to input got rendered so it showed undefined I then used ABC() function ABC(){set interval(function (){document.body.innerHtml=""},100)} – Ved Nig Oct 29 '20 at 21:42
  • Now it executes after the script. I'll attach that answer soon. – Ved Nig Oct 29 '20 at 21:44

3 Answers3

1

Because my reputation doesn’t allow me to comment, I have to say it here. I have encountered the similar situation when I try to use jquery to manually add an element to the DOM. So as @CBroe suggested, please find out when your js is executed and the element is definitely not there. You can use F12 button to open the google console to check whether element is there:

google console

Hope it helps you to find your way out. I can't find any problem in this code snippet so it is more likely related to how you render your html and its happening time compared to the js execution time.

-----update-------

Based on your code in fiddle, you should definitely move the script down like behind the DOM body

---------Test---------

As you can see, I have tested on my google browser and it works. I can get the element and manipulate it and there is not error after I comment the getElementById("numbern") in the top script. test result

Stan Peng
  • 84
  • 1
  • 9
  • 2
    If you can't post comments, please wait until you can. This question is a **constantly-repeated** duplciate. It dosen't need answers to be posted and doing so can prevent the OP from deleting the question if they want to (since it has no value to future readers). It just needs people to vote to close in favor of the canonical target. – T.J. Crowder Oct 29 '20 at 12:28
  • @T.J.Crowder Sorry, i am new to this. Because I have encountered similar situation, I am really eager to give him some lead. LOL – Stan Peng Oct 29 '20 at 12:31
  • Even Iif I delete code in the top script there is another one in bottom one and it too fails? – Ved Nig Oct 29 '20 at 12:42
  • 1
    @VedNig check my updated answer, it will work anywhere on your html page – Metabolic Oct 29 '20 at 12:45
  • I checked and tested your stackblitz, the error you are getting is because your script gets executed before the element is available in DOM – Metabolic Oct 29 '20 at 12:46
  • I even used trying setTimeout function won't it work? – Ved Nig Oct 29 '20 at 12:48
  • @VedNig - Don't use `setTimeout`. Instead, do what the answers to the [question you're duplicating](https://stackoverflow.com/questions/14028959/) say to do. Rather than wasting time going back and forth here, read through and property understand and digest those answers. **If** you still can't figure it out, post a new question with a **runnable** [mcve] demonstrating the problem, using Stack Snippets (the `[<>]` toolbar button); [here's how to do one](https://meta.stackoverflow.com/questions/358992/). But really, your answer is there. – T.J. Crowder Oct 29 '20 at 12:51
  • 1
    @VedNig, as you can see. When the page is firstly loaded, there is no value in the element so that it is undefined. After it is loaded, you can still manipulate it. – Stan Peng Oct 29 '20 at 12:57
1

Make sure that the element exists in DOM before you call your selector. document.ready can be used to wait for the document object to load first. Following snippet works fine:

function getValue() {
  
  docsd = document.getElementById('numbern');
  console.log(docsd.value);

};
document.addEventListener('DOMContentLoaded', getValue(), false);
<input id="numbern" name="nub" placeholder="Your Roll No." class="form-control col-6" value="10" autocomplete="off">
Metabolic
  • 2,191
  • 3
  • 22
  • 38
1

Use this Code it will listen to event after you change the value in input box it will execute the console.log

`let docsd=document.getElementById('numbern');

docsd.addEventListener("input",()=>{ console.log(docsd.value);
})`

Pawan Deore
  • 31
  • 6