We Keep Coding

Document.querySelector returns a NULL value - script is at bottom of page

I am trying to get the patientNumber (ClinicA100-PF-TR1-P1) using querySelector. I keep getting a NULL value. The patientNumber is at the top of the page and the script is at the bottom. Even after the page is loaded, I click a button that runs the function and it still returns a NULL value.
Here is a screenshot of the selectors (https://recordit.co/IypXuuXib0)
<script type="text/javascript">
function getPatientNumber(){
var patientNumber = document.querySelector("patientNumber");
console.log(patientNumber);
console.log("hello");
return patientNumber;
}
var patientNumber = getPatientNumber();
console.log(patientNumber);
_kmq.push(['identify', patientNumber]);
</script>
Thank you for any help you can provide.
ADDITIONAL HTML INFORMATION:
I am using Caspio (database management software) to create this HTML code. I don't know if that may be the cause of the issue. Here is the HTML CODE.
<p class="sponsorName" id="sponsorNameID">[#authfield:User_List_Sponsor_Name]</p>
<p class="clinicNumber" id="clinicNumberID">[#authfield:User_List_Site_Number]</p>
<p class="protocolNumber" id="protocolNumberID">[#authfield:User_List_Protocol_Number]</p>
<p class="patientNumber" id="patientNumberID">[#authfield:User_List_Patient_Number]</p>

You are missing a dot.
var patientNumberNode = document.querySelector(".patientNumber");
var patientNumber = patientNumberNode.innerText;

if you select the item with class".", if you select with id, you should use"#".
var patientNumber = document.querySelector(".patientNumber"); // class select
var patientNumber = document.querySelector("#patientNumber"); // id select

Your selector is incorrect. It should be
var patientNumber = document.querySelector(".patientNumber");
Why is it failing:
When you use patientNumber as the selector, JavaScript looks for an element with a name of patientNumber. Since that's not the case, and you are looking for an element with a class of patientNumber, you need to use the . notation.
Addon Suggestion (can be ignored):
Since you are also using IDs, consider using document.getElementById() as it is faster than using document.querySelector().
Note that if you use document.getElementById(), your .patientNumber selector won't work. You need to write it as
document.getElementById('patientNumberID');
//ID based on the screenshot of the DOM you've shared

While the code is at the bottom of the page, and the element is at the top, it is not loaded asynchronously as it comes from a third party database. i put a delay in the getPatientNumber() and it works now.

Finding $(this) after a function

So here's my problem: I'm using a function and I need the function to be specific to each tr with the class "middleone". It's supposed to change the insides of a div inside of the the tr with the class "middleone". But it's not working!
I know the recursive portion of it is working, and the "navigation" should be spot on, because even when i'm using just $(this) it doesn't do anything. When using document.getElementById it works fine but of course that only targets the first div and the full version of the code has to "Go here, pull from here, put it here, go to the next area, pull from here.. etc" Here's the testing code.
$('.middleone').each(function() {
var tripleeagain = $(this).find('div')
tripleeagain.innerHTML = "$";
});
Thanks for any help

tripleeagain is a jquery object collection upon which you should use html() instead of innerHTML
Basically you could just write:
$('.middleone').find('div').html("$");
If you are doing specific stuff inside the loop then:
$('.middleone').each(function() {
//Some specific logic
var tripleeagain = $(this).find('div').html("$");
});

The problem is you are trying to access native API from a jQuery object.
var tripleeagain = $(this).find('div');// this will return a jQuery object
So you should use the jQuery API for setting the html contents
tripleeagain.html("$");
jQuery html API documentaion

Script not creating <a> element

I am trying to add a link to a page I cannot directly access the HTML on, aside from the footer. Using Javascript, I am attempting to use the createElement() method. I have successfully used the same process to create a link element in the header.
function createForgotPasswordLink(){
var pwlink=document.createElement("a")
pwlink.setAttribute("id", "forgotPssLink")
pwlink.setAttribute("href", "http://www.mysite.com/page.aspx")
pwlink.innerHTML("Forgot Password?")
document.getElementsByTagName("body")[0].appendChild(pwlink)
}
createForgotPasswordLink();
The only difference between the two scripts is that when making the link element, I appendChild() on the head not body and I do not set the innerHTML of the link element as I have done in the above a element. For some reason, the above code does not work. Even after removing line 5.

You are using the property .innerHTML like a method. Don't use parens, use an =. Also, I wouldn't bother setting the attributes, just set the property values directly. The code is more straightforward and easier to read:
function createForgotPasswordLink() {
var pwlink = document.createElement("a");
pwlink.id = "forgotPssLink";
pwlink.href = "http://www.mysite.com/page.aspx";
pwlink.innerHTML = "Forgot Password?";
document.body.appendChild(pwlink)
}

Extracting text from a HTML to be stored as a JS variable, then to be added to a separate HTML's element

Alrite, I have seen other Questions with similar titles but they don't do exactly what Im asking.
I have 2 x HTML documents, one containing my page, one containing a element with a paragraph of text in it. As-well as a separate .js file
what I want to do is extract this text, store it as a JS variable and then use jQuery to edit the contents of an element within the main page. This is the conclusion I came to but it didnt work as expected, im not sure if it is me making a syntax error or if i am using the wrong code completely:
$(document).ready(function(){
var c1=(#homec.substring(0))
// #homec is the container of the text i need
$(".nav_btn #1").click(function(c1){
$(".pcontent span p") .html(+c1)}
);
});
i know +c1 is most probably wrong, but i have been struggling to find the syntax on this one. thankyou in advance :D

var c1=(#homec.substring(0)) will throw an error because #homec is not a valid variable name, is undefined, and does not have a property function called substring. To get the html of an element with an id of homec, use the html method:
var c1 = $("#homec").html();
c1 should not be an argument of the click function because it is defined in the parent scope. +c1 is unnecessary because you do not need to coerce c1 to a number.
If you are trying to add content to the end of the paragraph, use the append method:
$(".pcontent span p").append(c1)
That means you should use this code instead:
$(document).ready(function() {
var c1 = $("#homec").html();
$(".nav_btn #1").click(function() {
$(".pcontent span p").append(c1)
});
});
P.S. Numbers are not valid ID attributes in HTML. Browsers support it, so it won't make anything go awry, but your pages won't validate.

Try this:
$(".nav_btn #1").click(function(c1){
var para = $(".pcontent span p");
para.html(para.html() + c1);
});

The JQuery text() function will allow you to get the combined text contents of each element in the set of matched elements, including their descendants. You can then use the text(value) function to set the text content of your target paragraph element. Something like this should suffice:
$(document).ready(function() {
var c1 = $("homec").text();
$(".nav_btn #1").click(function() {
$(".pcontent span p").text(c1);
});
});
See the JQuery documentation for more details on the text() function. If you need to capture the full structure of the other document, then try the html() function instead.

SCRIPT 600 Error : Invalid target element for this operation

I have a php site that works fine in FireFox and Chrome, but breaks completly in IE.
Here is just one of the scripts that is throwing an error...
SCRIPT600: Invalid target element for this operation.
function loadDeals() {
$.get("modules/recommendations/viewrecommendations.php",{},function(response){
document.getElementById("dealdata").innerHTML = response;
});
}
It throws the error on the line that sets the innerHTML...Any ideas why this is happening?

IE has a problem replacing TBODY contents with innerHTML. The jQuery given above works; if you are not using jQuery, another solution is to have a <div id='helper' style='visibility:hidden'/> somewhere in the page - when the response arrives, put the value with a surrounding <table> tag into the hidden div, then use the DOM to remove the old contents from your visible tag and insert the elements from the hidden tag 1 by 1:
var a=document.getElementById("dealdata");
while(a.firstChild!=null)
a.removeChild(a.firstChild);
var b=document.getElementById("helper");
b.innerHTML="<table>"+this.responseText+"</table>";
while(b.tagName!="TR") {
if(b.tagName==null)
b=b.nextSibling;
else
b=b.firstChild;
}
for(;b!=null;b=b.nextSibling)
a.appendChild(b);

Try this: are you using jquery?
also looks like you have an extra set of brackets in there (i think between ,{},)
function loadDeals() {
$.get("modules/recommendations/viewrecommendations.php",function(response){
$("#dealdata").html(response);
});
}