Need to convert a simple jQuery code into JavaScript

JavaScript
1

Could someone please help me convert this piece of jQuery code into JavaScript?

$(function () {
$(“div”).slice(0, 4).show();
$(“#loadMore”).on(‘click’, function (e) {
e.preventDefault();
$(“div:hidden”).slice(0, 4).slideDown();
});
});

I got it from here btw.

2

Try the following code:

(function(){
  var divElements=document.getElementsByTagName('div');
  var loadMore=document.getElementById('loadMore');
  loadMore.addEventListener('click',function(e){
    e.preventDefault();
    if(divElements.style.visibility=='hidden'){
    divElements.slice(0,4).slideDown();
    }
  });
 })();
2 Likes
3

Does not work.

4

What is the error in your console?

5

I replaced the code that you gave me with the one linked in OP (code pen) and it doesn’t work.

6

And what is the error message in your dev tools console pane?

7

Uncaught TypeError: Cannot read property ‘visibility’ of undefined at HTMLAnchorElement
Line 109

if(divElements.style.visibility==‘hidden’)

8

Try this:

(function(){
  var divElements=document.getElementsByTagName('div');
  var loadMore=document.getElementById('loadMore');
  loadMore.addEventListener('click',function(e){
    e.preventDefault();
    if(divElements.style.display=='hidden'){
    divElements.slice(0,4).slideDown();
    }
  });
 })();

or this:

(function(){
  var divElements=document.getElementsByTagName('div');
  var loadMore=document.getElementById('loadMore');
  loadMore.addEventListener('click',function(e){
    e.preventDefault();
    if(divElements.style.display=='none'){
    divElements.slice(0,4).slideDown();
    }
  });
 })();
9

I’m guessing you didn’t put the code just before the closing </body> tag.

i.e. after the DOM has (mostly) loaded in.

10

Doesn’t work. This time it says cannot read property ‘display’ blah blah

11

No, the code is before the closing body tag.

12

Do the divs have a style attribute to begin with?

1 Like
13

Check for one element.Set:

if(divElements[0].style.visibility=='hidden')
1 Like
14

Div has display:none;

15

Doesn’t work and I get no errors in console.

16

OK, time to get aggressive. Try this

(function(){
  var divElements=document.getElementsByTagName('div');
  var loadMore=document.getElementById('loadMore');
  loadMore.addEventListener('click',function(e){
    e.preventDefault();
if(divElements) {
 if(divElements.style) {
  if(divElements.style.display) {
    if(divElements.style.display=='none'){
    divElements.slice(0,4).slideDown();
    }
  } else {
console.log("no div.style.display found");
  }  
 } else {
console.log("no div.style found");
 } 
} else {
console.log("no divs found");
}
  });
 })();
1 Like
17

No div.style found.

18

D’oh!
I forgot that divElements is a collection, so of course there needs to be a reference to an index. :blush:

Try this

(function(){
  var divElements=document.getElementsByTagName('div');
  var loadMore=document.getElementById('loadMore');
  loadMore.addEventListener('click',function(e){
    e.preventDefault();
if(divElements) {
for (var i = 0; i < divElements.length; i++) {
 if(divElements[i].style) {
  if(divElements[i].style.display) {
    if(divElements[i].style.display=='none'){
    divElements.slice(0,4).slideDown();
    }
console.log("div.style.display found OK");
  } else {
console.log("no div.style.display found");
  }  
 } else {
console.log("no div.style found");
 } 
} else {
console.log("no divs found");
}
  });
 })();
1 Like
19

Doesn’t work and no errors in console.

20

Sorry, I forgot the “= 0” :blush: :blush: (previous now edited)
I really need to get away for a bit to take care of some pressing RL business so I can concentrate better.

1 Like