How do I get ahold of the ID with GetElementByID if the element is “hidden”

Question

So I am trying to get ahold of the element "g-recaptcha-response" which only displays in the websource when the captcha appears (If you want to look for this element you need to enter the wrong name & password a few times) This captcha appears all the time for me which is good because I'm trying to locate that specific element by its ID, if you inspect the websource when the captcha is there you will be able to CTRL + F and search for it and it will appear but its.. kinda transparent? Which makes me think its hidden and here comes the issue.

When I try to capture it and give it a value it throws me this error.

System.NullReferenceException: 'Object reference not set to an instance of an object.'

private void LoadRS()
        {
            webBrowser1.Navigate("https://secure.runescape.com/m=weblogin/loginform.ws?mod=www&ssl=0&dest=community");
            webBrowser1.Document.GetElementById("g-recaptcha-response").InnerHtml = "something";
        }

Here is what it looks like

Any ideas?

EDIT

I was questioning why I could see the element in the element editor on Chrome and not when rightclicking the webpage and I was told that it was because

the page source is just what is there on initial load the html page inspect element will show everyhthing, stuff that is injected in with js, etc

Now I need to figure out how to get to that element with C#

Answer 1

It is because the element ("g-recaptcha-response") is generated by the application logic (probably JavaScript). We need to trigger the element generation before we can get the element.

We can try to click the submit/login button to force element ("g-recaptcha-response") generation. For example in JavaScript:

var loginButton = document.querySelector("input[type=submit]");
loginButton.click();

// Add some delay to wait for proper element generation, probably not needed
setTimeout(function() {
  var recaptchaID = document.getElementById("g-recaptcha-response");
}, 1000);