#Button Interaction

1 messages · Page 1 of 1 (latest)

modern portal
#

Hey, im looking for help about Buttons and their interactions/collector, let me explain :

#

So basically i have been looking to do something very simple which is having buttons on an embed and changing embed pages when you click those buttons, nothing hard.

I'm Pretty new to discord.js and im trying to understand the collector and stuff.

#

I have been trying to understand the discord js documentations i could find but i couldn"t find what i found or understand what was said, i also searched up on youtube and just google but since it's pretty new to discord client i guess there are not much of those help about buttons

#

i only find tutorials wiht the unofficial package discord-buttons and some stuff changed from it to discord.js > Buttons.

#

from now on i have been doing this :

# 
const pagination = async (interaction, pages) => {
    if(!interaction && !interaction.channel) throw new Error("Provide a message to access the channel");
    if(!pages) throw new Error("You need to specify pages");
    let page = 0;
    const btn1 = new MessageButton().setEmoji('◀️').setCustomId('previous').setStyle('PRIMARY');
    const btn2 = new MessageButton().setEmoji('▶️').setCustomId('next').setStyle('PRIMARY');
    const row = new MessageActionRow().addComponents([btn1, btn2]);
    const btn1Dead= new MessageButton().setEmoji('◀️').setCustomId('previous-disabled').setStyle('PRIMARY').setDisabled(true);
    const btn2Dead = new MessageButton().setEmoji('▶️').setCustomId('next-disabled').setStyle('PRIMARY').setDisabled(true);
    const deadRow = new MessageActionRow().addComponents([btn1Dead, btn2Dead]);

    let currentPage = await interaction.channel.send({embeds : [pages[0]], components: [row]});
    const filter = (b) => ['previous', 'next'].includes(b.id);
    let col = await currentPage.channel.createMessageComponentCollector(filter, { time:ms('30s')})
#

this looks to be working not that bad but my problem is at the collector 'activation"

# 
col.on('collect', button => {
        if(button.user.id !== interaction.user.id) return;
        console.log(button.id)
        if(button.id == 'previous'){
            page = page > 0 ? --page : pages.lenght -1
        } else if(button.id == 'next') {
            page = page + 1 < pages.lenght ? ++page : 0;
        }

        currentPage.edit({embeds : [pages[page]], components: [row]})
    })
#

this doesnt seems to work

#

when im using a button, it gives me its id

#

but they are absolutely different from the customID i gave them

#

So when i click a button, i get in my console the ID, which is always a random number

#

and its absolutely not changing the pages

#

Can someone show me the way please ? (and ping me when too lol)

neat timber
#

Use button.customId

modern portal
neat timber
modern portal
modern portal
# 
    col.on('collect', button => {
        button.deferReply()
        if(button.user.id !== interaction.user.id) return;
        console.log(button.customId)
        console.log(pages)
        console.log(".................")
        console.log(pages[page])
        if(button.customId == 'previous'){
            if(page !== 0){
                console.log("Reached 1")
                --page;
                currentPage.edit({embeds : [pages[page]], components: [row]})
            }
            else{
                console.log("Reached 2")
                page = pages.lenght - 1;
                currentPage.edit({embeds : [pages[page]], components: [row]})
            }
        } else if(button.customId == 'next') {
            if(page < pages.lenght - 1){
                console.log("Reached 3")
                page++;
                currentPage.edit({embeds : [pages[page]], components: [row]})
            }
            else{
                console.log("Reached 4")
                page = 0;
                currentPage.edit({embeds : [pages[page]], components: [row]})
            }
        }
    })
#

When i click a button, it prints the pages array correctly, the actual page correctly but it doesnt edit the message, it just adds a "bot is thinking" in the chat. I have no error, whats wrong with it

#

i can show you what the console log but its hella long so its not really useful

forest badge
#

wait

modern portal
#

Thanks you

forest badge
#

whats the issue

modern portal
forest badge
#

k waiy

modern portal
#

i clicked the red button, so "next" (customId)

forest badge
modern portal
# 
                   ^^^^^

SyntaxError: await is only valid in async functions and the top level bodies of modules```
forest badge
modern portal
#

Why can that work ?

forest badge
#

u need to await the arrow function

#

just do that

modern portal
#

Okey, thanks bro

forest badge
#

did it work?

modern portal
#

yes but i just need to fix something myself from my embed pagination

forest badge
#

well, glad i could help

#

bye

modern portal
#

bye