I am trying to edit an element's input value. I am 100% sure it is loaded in the DOM. However, when I mess with it in console, it cannot find the element until I inspect it. Going by the token name property there is something going on. But because inspect seems to 'convert' it to be able to be found, surely there is a way to do it automatically?

Code in question: /

If I put $('input') in the console it returns null. If I inspect any of the forms, it returns with

<input class="FORMshrt2" name="fd_co_firstname" type="text" maxlength="100" value="">

Also, document.querySelector('input') returns

<input type="hidden" name="csrfmiddlewaretoken" value="XXbWi2ygjOsJ8igaEa9MvFb5Nm7xznOD">

but once I inspect the element, it returns

<input class="FORMshrt2" name="fd_co_firstname" type="text" maxlength="100" value="">

I am trying to edit an element's input value. I am 100% sure it is loaded in the DOM. However, when I mess with it in console, it cannot find the element until I inspect it. Going by the token name property there is something going on. But because inspect seems to 'convert' it to be able to be found, surely there is a way to do it automatically?

Code in question: https://jsfiddle/h8oyLdv4/1/

If I put $('input') in the console it returns null. If I inspect any of the forms, it returns with

<input class="FORMshrt2" name="fd_co_firstname" type="text" maxlength="100" value="">

Also, document.querySelector('input') returns

<input type="hidden" name="csrfmiddlewaretoken" value="XXbWi2ygjOsJ8igaEa9MvFb5Nm7xznOD">

but once I inspect the element, it returns

<input class="FORMshrt2" name="fd_co_firstname" type="text" maxlength="100" value="">

• javascript
• html
• google-chrome
• dom
• element

• 2 "Code in question: jsfiddle/h8oyLdv4/1" No, that's code linked to the question.The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a minimal reproducible example in the question, ideally using Stack Snippets (the <> toolbar button) to make it runnable. More: How do I ask a good question? – T.J. Crowder Commented May 17, 2017 at 7:16
• Try something like $('input[name="fd_co_firstname"]'), not just $('input'). Access the value with $('input[name="fd_co_firstname"]').val() – Aethyn Commented May 17, 2017 at 7:20
• Noted. However the source is too big to post here and I didn't want to edit it down in case I broke something. I still think this answer will help anyone who finds it in the future because the actual problem was kind of specific but the things it displays will e up in searches. – JustaCookie Commented May 17, 2017 at 7:39

1 Answer 1

From the csrfmiddlewaretoken thing, you're apparently doing this on jsFiddle.

The issue is that the console starts out attached to the main window, in which $ is a function that's a shortcut for getElementById (overriding Chrome console's built-in $, which is a shortcut for querySelectorAll). Since there's no element with the id input, $('input') returns null. Since the first input on jsFiddle's main window is the csrfmiddlewaretoken input, querySelector finds that input.

But if you right-click and inspect an element in the Result frame, the console is then attached to the frame instead, which has your input elements and your scripts and such in it, so (depending on what's in your scripts) $ is either Chrome console's default $ or jQuery or whatever else you have loaded, and because your content is there, you find it when you use $ or querySelector.