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.

generate href for a link based on id using javascript

I'm trying to use JavaScript to create an ID for my links and also to tell it where to link to.
My JavaScript has generated a link element in my HTML:
<a id = "NB4-CAXL-14U-12-AAG"> Link Text </a>
And that appears as it should.
I then have a variable eopartnum[i]:
console.log(eopartnum[i]); //output: NB4-CAXL-14U-12-AAG
This variable matches my ID for my link above. Then i tried to access that link via the ID and assign an href to it, like so:
var linktoprod = document.getElementById(eopartnum[i]);
console.log(linktoprod); //returns null
linktoprod.href = "http://www.enviroptics.com/"; //Cannot set property 'href' of null(…)
Why does my linktoprod come up as null? Is my syntax wrong?
JSfiddle for full code: http://jsfiddle.net/98oL12tk/17/ Lines 106-109 in JS section.

The problem is that you are calling getElementById() before you append the table to the document. At the time that you are querying for the ID, it doesn't yet exist. This example seems a bit contrived; I think you could just set firstcelllink.href = 'http://www.enviroptics.com/';
EDIT: probably more appropriate to use firstcelllink.setAttribute('href', 'http://www.enviroptics.com/');

How to get the content of the "data-files" property of an HTML tag

I am trying to figure out how to get the quoted content of an HTML tag.
Here's the HTML I've got :
<div class="html5videoplayer" id="player1" data-files="aGV5IG1hbg=="></div>
I'm trying to get the content of the data-files attribute.
The main problem is that I have no clue how you could get the contents of a specific attribute. I know I can identify the entire class or id by using getElementById() or getElementsByClassName() but to get a specific attribute is unknown for me.
If you have a clue for me I'd greatly appreciate it. Thank you!

Use data() function in jQuery.
$('#player1').data('files');
In simple JS,
var data = document.getElementById('player1').dataset.files;
But for older browsers like IE8 you cannot get it using dataset,
So you can use this workaroud (only need this if you are not using jQuery, then simply use the first suggestion.),
var data = document.getElementById('player1').getAttribute('data-files');

You can use dataset:
var files = document.querySelector('#player1').dataset.files;
data-* is attribute from html5, which can be used to store specific/particular data for element. If you have multiple data-* attributes on your element then it will return an object with all the keys and values.

With jQuery :
var dataFiles = $('#player1').attr("data-files");
Without jQuery :
var dataFiles = document.getElementById("player1").getAttribute("data-files");
Both options should work in any browser!
You can try both of them at this Fiddle.

In this case you can access the content of data-files with the jquery attr() function
$("[data-files]").attr("data-files")

You can use JQuery data() function OR attr() function to get content
<div class="html5videoplayer" id="player1" data-files="aGV5IG1hbg=="></div>
<script>
$(document).ready(function(){
var result_dataFun = $("#player1").attr("data-files");//Using data() function
var result_attrFun = $("#player1").data("files"); //Using attr() function
alert(result_dataFun);
alert(result_attrFun);
});
</script>
Result :
aGV5IG1hbg==

Why can I not set my data attribute with jQuery?

I have the following:
editCity: "/Admin/Citys/Edit?pk=0001I&rk=5505005Z"
$('#editCity')
.attr('title', "Edit City " + rk)
.data('disabled', 'no')
.data('href', editCity)
.removeClass('disabled');
When I check the HTML with developer tools I see this:
<div class="button dialogLink" id="editCity"
data-action="EditCity" data-disabled="yes"
data-entity="City" title="Edit City 5505005Z" ></div>
Everything is updated except the href. Anyone have an ideas what I am doing wrong?

Use
var editCity = "/Admin/Citys/Edit?pk=0001I&rk=5505005Z";
What you did was a labeled statement, consisting only of a string literal and missing a semicolon.
Btw, jQuery's .data() method is not to be used for data-attributes, but just for associating JS objects with DOM elements.

I think jQuery stores the data internally if they don't exist the first time you set them. If you really want to force it:
$("#editCity").attr("data-href",editCity)

You cannot set a href attribute to a div.
you could use data-href instead, or use a a-tag instead of a div.

How to extract content of html tags from a string using javascript or jquery? [duplicate]

This question already has answers here:
Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
(29 answers)
Closed 8 years ago.
Maybe this is very basic, but I am all confused.
I have a simple html page with many sections (div). I have a string containing html tags in javascript. The code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
</script>
</head>
<body>
<div id="title1"></div>
<div id="new1"></div>
<div id="title2"></div>
<div id="new2"></div>
</body>
</html>
I want to extract content of the html tags (from the string in javascript) and display that content in my html page in desired sections.
i.e. I want "This is a heading1" displayed in <div id="title1"> and "This is a paragraph1." to be displayed in <div id="new1"> and same for the second pair of tags.
I need all of this to work only on the client side. I have tried to use HTML DOM getElementByTagName method and its getting too complicated. I know very little of jquery. And I am confused. I dont understand how to go about it. Can you guide me what to use - javascript or jquery and how to use it? Is there a way to identify the from the string and iterate through it?
How to extract "This is heading1" (and similar contents enclosed in the html tags) from str1?? I don't know the index of these hence cannot use substr() or substring() function in javascript.

Using .text() as both a 'getter' and a 'setter' we can just repeat the pattern of:
target the element on the page we wish to fill
give it content from
the string
jsFiddle
<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
$(function(){
var $str1 = $(str1);//this turns your string into real html
//target something, fill it with something from the string
$('#title1').text( $str1.find('h2').eq(0).text() );
$('#new1').text( $str1.find('p').eq(1).text() );
$('#title2').text( $str1.find('h2').eq(1).text() );
$('#new2').text( $str1.find('p').eq(1).text() );
})
</script>

IMHO , You can do this in jquery in two steps :
Step 1) Parse the string into an XML/HTML document.
There are at least two ways to do this:
a) As mentioned by Sinetheta
var htmlString = "<html><div></div></html>";
var $htmlDoc = $( htmlString );
b) Using parseXML
var htmlString = "<html><div></div></html>";
var htmlDoc = $.parseXML( htmlString );
var $htmlDoc = $( htmlDoc );
Please refer http://api.jquery.com/jQuery.parseXML/
Step 2) Select text from the XML/HTML document.
var text = $htmlDoc.text( jquery_selector );
Please refer http://api.jquery.com/text/

Well,
First of all you should clarify how you are getting the source html from your own html. If you are using Ajax you should tick the source as html, even xml.

document.getElementById('{ID of element}').innerHTML
if use jquery
$('selector').html();
<div id="test">hilo</div>
<script>
alert($('#test').html());
<script>

Let me preface my answer with the knowledge that I don't think I fully understand what you want to do...however I think you want to replace some (although you make it sound like all) html with some data source.
I've rigged a simple example is jsfiddle here:
http://jsfiddle.net/rS2Wt/9/
This does a simple replace using jquery on a target div.
Hope this helps, good luck.