Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to use document.querySelector() in javascript

ShagunMalik
Level 3
Level 3

I'm trying to use document.querySelector() in javascript.

There is a element in my html with 'ul' tag.

then in my javascript I'm using it as :

const ultag = document.querySelector("ul");

then I'm calling a function for pagination like :

function x(pagecount,currentpage)

{

let litag =' ';

if (page<1)

{

litag= something;

}

ultag.innerHTMl = litag;

}

but it is showing error in ultag.innerHTML as it is showing null value for ultag.

Please help how to use it.

 

1 Accepted Solution
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @ShagunMalik 

 

Let's say you have the HTML markup as:

 

<ul class="project-list single-col">
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
</ul>

 

In JS If you use the below code:

var x = document.querySelector("ul");

 x will hold the complete markup that we have above.

 

Thanks!

View solution in original post

16 Replies
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @ShagunMalik 

 

Let's say you have the HTML markup as:

 

<ul class="project-list single-col">
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
<li class="project-item" style="clear: left;">
Something
</li>
</ul>

 

In JS If you use the below code:

var x = document.querySelector("ul");

 x will hold the complete markup that we have above.

 

Thanks!

View solution in original post

Asutosh_Jena_
Community Advisor
Community Advisor

Can you just try in browser console once? I just tried and it works!

 

asutosh_jena_0-1618920943697.png

 

ShagunMalik
Level 3
Level 3

Hi @Asutosh_Jena_ , you are right it is working but when I'm trying to use x.innerhtml in js then it is showing error. I have modified my question, can please read again my question and then help? Thank you

Asutosh_Jena_
Community Advisor
Community Advisor

Hi @ShagunMalik 

 

Can you try with the below code?

var ultag = document.querySelector("ul");

function x(pagecount, currentpage) {
let litag = '';
if (pagecount < 1) {
litag = "something";
} else{
litag = "nothing";
}
ultag.innerHTML = litag;
}

 

ShagunMalik
Level 3
Level 3

No @Asutosh_Jena_ , still the same error, console is showing error cannot set property 'innerHTML' of null.

Asutosh_Jena_
Community Advisor
Community Advisor
This can be done in both JS and Jquery. Can you please put the HTML structure. Want to know why it's returning null.
ShagunMalik
Level 3
Level 3

<div class="something">

<ul class="pagination" id ='pagination'>

</ul>

</div>

In between of UL tags I'm trying to dynamically add pagination. 

When I'm using document.querySelector(".pagination"); in console then it is working absolutely fine but showing error when using it with innerHTML.

Asutosh_Jena_
Community Advisor
Community Advisor

Hi @ShagunMalik 

Can you try with this?

 

var ultag = document.querySelector("ul");

function x(pagecount) {
for (var i = 0; i < pagecount.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode("Something"));
ultag.appendChild(li);
}
}

 We need to create <li> within <ul> and append the content. 

ShagunMalik
Level 3
Level 3
Same error, cannot read property 'appendChild ' of null
Asutosh_Jena_
Community Advisor
Community Advisor

Hi @ShagunMalik 

 

If you have the below markup in your page view source i.e in the HTML, it will never return null.

<div class="something">

<ul class="pagination" id ='pagination'>

</ul>

</div>

 

You are not adding these elements in Jquery right?

ShagunMalik
Level 3
Level 3

Yes @Asutosh_Jena_ Error_pagination.jpg I'm not adding these elements in jquery. I have added the Screenshot for your reference.

ShagunMalik
Level 3
Level 3

Hey @Asutosh_Jena_ , working fine now. Thank you . There was a mistake in my calling in js.

Anudeep_Garnepudi
Community Advisor
Community Advisor

@ShagunMalik 

Are you sure you have at-least one ul tag in page? If there is no ul tag in DOM, document.querySelector("..") will return null.