Search code examples
discorddiscord.js

Make a page guide with buttons in discord.js v14

I want to make a page guide like this:

Page guide discord.js v14

I want to make so the buttons below the message edits the embed but, when I run it, it gives me an error saying that the message was never sent so it can not edit anything!

Here is my code:

For the embed/the actual slash command:

const { SlashCommandBuilder, EmbedBuilder, ButtonBuilder, ActionRowBuilder, SelectMenuBuilder, ButtonStyle } = require('discord.js') ;

module.exports = {
    data: new SlashCommandBuilder()
        .setName('tutorial')
        .setDescription('Start the tutorial'),
    
    async execute(interaction, client) {
        const embed = new EmbedBuilder()
            .setColor(0x991be2)
            .setTitle('Tutorial')
            .setDescription('Welcome to the tutorial!')

//all the buttons to change the page
        const buttons = new ActionRowBuilder()
                .addComponents(
                    new ButtonBuilder()
                        .setCustomId('no1')
                        .setEmoji('1029435230668476476')
                        .setDisabled(true)
                        .setStyle(ButtonStyle.Primary),
                    new ButtonBuilder()
                        .setCustomId('no2')
                        .setEmoji('1029435199462834207')
                        .setDisabled(true)
                        .setStyle(ButtonStyle.Primary),
                    new ButtonBuilder()
                        .setCustomId('page')
                        .setLabel('setup')
                        .setDisabled(true)
                        .setStyle(ButtonStyle.Secondary),    
                    new ButtonBuilder()
                        .setCustomId('step1')
                        .setEmoji('1029435213157240892')
                        .setStyle(ButtonStyle.Primary),
                    new ButtonBuilder()
                        .setCustomId('last')
                        .setEmoji('1029435238948032582')
                        .setStyle(ButtonStyle.Primary)
                )

        await interaction.reply({
            content: '',
            embeds: [embed],
            components: [buttons],
            ephemeral: false
        })
    }
}

For the button with the custom id('step1'):

//when the button with the right arrow is pressed('step1')
//then it should edit the embed to Step One of the tutorial!

const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require("discord.js")

module.exports = {
    data: {
        name: 'step1'
    },

    async execute(interaction, client) {
        // test embed 
        const embed = new EmbedBuilder()
            .setColor(0x00acee)
            .setTitle('Step One')
            .addFields(
                {
                    name: 'a',
                    value: 'a'
                },
                {
                    name: 'a',
                    value: 'a'
                },
                {
                    name: 'a',
                    value: 'a'
                },
            )

            const buttons = new ActionRowBuilder()
                .addComponents(
                    new ButtonBuilder()
                        .setCustomId('no1')
                        .setEmoji('1029435230668476476')
                        .setDisabled(true)
                        .setStyle(ButtonStyle.Primary),
                    new ButtonBuilder()
                        .setCustomId('step1')
                        .setEmoji('1029435199462834207')
                        .setDisabled(false)
                        .setStyle(ButtonStyle.Primary),
                    //This button shows what step you are at as you can see on the label.
                    new ButtonBuilder()
                        .setCustomId('page')
                        .setLabel('setup')
                        .setDisabled(true)
                        .setStyle(ButtonStyle.Secondary),    
                    new ButtonBuilder()
                        .setCustomId('step2')
                        .setEmoji('1029435213157240892')
                        .setStyle(ButtonStyle.Primary),
                    new ButtonBuilder()
                        .setCustomId('last')
                        .setEmoji('1029435238948032582')
                        .setStyle(ButtonStyle.Primary)
                )

        await interaction.editReply({
            content: '',
            embeds: [embed],
            components: [buttons],
            ephemeral: false
        })
    }
}

What do I do?

Solution

  • that is not how you get the interaction from the button,

    module.exports = {
    name: 'interactionCreate',
  
    async execute(interaction, client){

    this is how to do it ↑

    first you create an interactionCreate event that gets triggered when the button is pushed, then, check if the interaction is a button https://discordjs.guide/interactions/buttons.html#the-interactioncreate-event here is an example how to do it, after that check if the interaction.customId is the button's customId, so in your case if(interaction.customId !== 'step1') return, and then start writing your interaction code after you checked that the interaction is a button and that button has that customId

    another thing, to edit that message use interaction.update()

    also if you don't want to send any content or if you want that message to not be ephemeral then just don't put them there, so you will have interaction.update({ embeds: [embed], components: [buttons] })