why does my function work in the console but I can't return it?

I have an array with 20 objects, only 10 of them are displayed in my website page, but I'd like to display the next 10 when clicking a button. I created a function that works and gets called when clicking said button but it only works in the console and I can't return it.

This is the button that calls the function:

<button id="next" onclick="nextTwo()">2</button>

and this is the function (the objList is the array containing 20 objects):

function nextTwo() {
    const page = 2;
    const step = 10;
    const start = page * step - step;
    const end = start + step;

    const nextobj = objList.slice(start, end);
    console.log(nextobj);
    return nextobj;
}

I tried adding a for loop and adding
document.getElementbyId('x_list').innerHTML = nextobj
but nothing seems to be working.

innerHTML expects a string to be assigned. You need to convert the secondpage array into a formatted string that can be displayed in the HTML.

    // Assuming you have a container element with id 'x_list' to display the objects
    const container = document.getElementById('x_list');
    
    // Clear the container before adding the new content
    container.innerHTML = '';
    
    // Convert the array to an HTML string and append it to the container
    nextobj.forEach(obj => {
        const item = document.createElement('div');
        item.textContent = obj.title; // Assuming each object has a 'title' property to display
        container.appendChild(item);
    });

I have tried your code and it works fine Here is a fiddle where the return statement in your code seems to be working fine. Also check that your function closing braces are set properly and check your console for "illegal return statement" error. But code works fine.

    const objList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ,20]

function nextTwo() {
    const page = 2;
    const step = 10;
    const start = page * step - step;
    const end = start + step;

    const nextobj = objList.slice(start, end);
    //console.log(nextobj);
    return nextobj;
} 

const nextobj = nextTwo()
console.log(nextobj)

For mapping movies title you need to map the title with a wrapper of html element.
So, you can take reference from below snippet.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const movieList = [
{
"title": "After Dark in Central Park"
},
{
"title": "Boarding School Girls' Pajama Parade"
},
{
"title": "Buffalo Bill's Wild West Parad"
},
{
"title": "Caught"
},
{
"title": "Clowns Spinning Hats"
},
{
"title": "Capture of Boer Battery by British"
},
{
"title": "The Enchanted Drawing"
},
{
"title": "Feeding Sea Lions"
},
{
"title": "How to Make a Fat Wife Out of Two Lean Ones"
},
{
"title": "New Life Rescue"
},
{
"title": "New Morning Bath"
},
{
"title": "Searching Ruins on Broadway"
},
{
"title": "Sherlock Holmes Baffled"
},
{
"title": "The Tribulations of an Amateur Photographer"
},
{
"title": "Trouble in Hogan's Alley"
},
{
"title": "Two Old Sparks"
},
{
"title": "The Wonder, Ching Ling Foo"
},
{
"title": "Watermelon Contest"
},
{
"title": "Acrobats in Cairo"
},
{
"title": "An Affair of Honor"
},
{
"title": "Another Job for the Undertaker"
}
]
const container = document.getElementById("dvdContainer")
function pageTwo() {
const page = 2;
const step = 10;
const start = page * step - step;
const end = start + step;
const secondpage = movieList.slice(start, end);
// console.log(secondpage);
return secondpage;
}
function mapMovieTitle(movieTitleList) {
const element =  movieTitleList.map((movie) => {
return `<span>${movie.title}</span>`
})
return element.join("<br>")
}
container.innerHTML = mapMovieTitle(pageTwo())

<!-- language: lang-html -->

<div id="dvdContainer">
</div>

<!-- end snippet -->