javascript - load more button not working

Question

When I click on the load more button, it should get the content from the divElements array and slice it correctly per page but it's not working like it should.

This entire HTML page including the JS function.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 60px auto;
    margin-top: 5px;
    font: normal 13px/100% sans-serif;
    color: #444;
}
img{
    width:30px;
    height:30px;
}
div {
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
}
.totop {
    position: fixed;
    bottom: 10px;
    right: 20px;
}
.totop a {
    display: none;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}
</style>
</head>
<a href="#" id="loadMore">Load More</a>
<script>

(function() {
    var divElements = [
    { adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/TDdxS9H.png></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/39rpmwB.jpg></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/1lBZQ1B.png></div>"},
    { adName: "<div class=article-loop><img src=https://i.imgur.com/Y5Ld4Qfh.jpg></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/8HumESY.jpg></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/CqCZBvk.png></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/wQVPRVp.png></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"},
    { adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"}
];
    var loadMore = document.querySelector('#loadMore');
    var divNumber = 2;

    loadMore.addEventListener('click', function(e) {
        e.preventDefault();
        for (var i = 0; i < divNumber; i++) {
        window.scrollTo(0,document.body.scrollHeight);
            if (i < divElements.length) {
                divElements[i].style.display = 'block';
            }

            if (i >= divElements.length) {
                loadMore.innerHTML = "Load Completed";
                return;
            }

        }
        divElements.splice(0, divNumber);

    });
})();
  loadMore.click();

</script>
</body>
</html>

First of all, you never open your body tag, please try adding <body> right after the ending of your head tag. — Komninos
– Komninos, Commented Jul 11, 2017 at 0:55
Your code throws a script error: TypeError: undefined is not an object (evaluating 'divElements[i].style.display = 'block''). What have you done about that? loadMore.click() depends on element IDs being made global variables, that is not a good idea and should never be used. When are the elements of divElements added to the document? — RobG
– RobG, Commented Jul 11, 2017 at 1:01

maxhallinan · Accepted Answer · 2017-07-11 01:06:42Z

1

These lines seem to expect DOM elements but divElements is an array of objects containing HTML strings.

    if (i < divElements.length) {
        divElements[i].style.display = 'block';
    }

    if (i >= divElements.length) {
        loadMore.innerHTML = "Load Completed";
        return;
    }

You need to insert these strings into the DOM using innerHTML and then select the resulting DOM elements for this to work.

answered Jul 11, 2017 at 1:06

maxhallinan

1,3792 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BerserkerDotNet · Accepted Answer · 2017-07-11 19:32:59Z

You cannot just edit the display of a string. You have to create an element first. Then the element needs to be appended to the DOM. Here is a way to do this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 60px auto;
    margin-top: 5px;
    font: normal 13px/100% sans-serif;
    color: #444;
}
img{
    width:30px;
    height:30px;
}
div {
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
}
.totop {
    position: fixed;
    bottom: 10px;
    right: 20px;
}
.totop a {
    display: none;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}
</style>
</head>
<body>
<div id="container"></div>
<a href="#" id="loadMore">Load More</a>
<script>

(function() {
    var divElements = [
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/TDdxS9H.png'},
    { imgUrl: 'http://i.imgur.com/39rpmwB.jpg'},
    { imgUrl: 'http://i.imgur.com/39rpmwB.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'}
];
    var loadMore = document.querySelector('#loadMore');
    var divNumber = 2;

    loadMore.addEventListener('click', function(e) {
        e.preventDefault();
        var container = document.getElementById('container');
        for (var i = 0; i < divNumber; i++) {
        window.scrollTo(0,document.body.scrollHeight);
            if (i < divElements.length) {
                var element = createElement(divElements[i].imgUrl);
                container.appendChild(element);
            }

            if (i >= divElements.length) {
                loadMore.innerHTML = "Load Completed";
                return;
            }

        }
        divElements.splice(0, divNumber);

    });
})();
  loadMore.click();

function createElement(url){
    var container = document.createElement('div');
    container.setAttribute('class', 'article-loop');
    var image = document.createElement('img');
    image.setAttribute('src', url);
    container.appendChild(image);
    return container;
}

</script>
</body>
</html>

always enclose attribute values into quotes, never leave them like this: class=article-loop. Correct will be class='article-loop'

The images need to be lazy loaded instead of loading them all as soon as you open the page. How would I achieve that?
You can store the array of image URLs and then create an element right before you append to the DOM. I've updated the answer to do just that.

Collectives™ on Stack Overflow

javascript - load more button not working

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related