CODEWITHSUNDEEP
javascriptnode.jsdiscord.js
Someone Like Me
Someone Like Me

Reputation: 51

How to disable button once it is clicked in Discord.js 13

How can I make it so that once a user clicks a button in the message, that button gets disabled whereas the other buttons are still clickable? I'm using Discord.js v13.1.0 and this is what I've been able to write so far:

const { MessageActionRow, MessageButton } = require('discord.js');

let row = new MessageActionRow()
    .addComponents(
        but_1 = new MessageButton()
            .setCustomId('id_1')
            .setLabel('Button 1')
            .setStyle('SECONDARY'),
        but_2 = new MessageButton()
            .setCustomId('id_2')
            .setLabel('Button 2')
            .setStyle('SECONDARY')
    );

interaction.reply({ content: "Click a button", components: [row] })

I tried creating message component collector to check the id of the button clicked and edit the button but turns out .addComponents() just adds another button instead of editing it. This is what I did:

const filter = i => i.customId === 'id_1' && i.user.id === interaction.user.id;

const collector = interaction.channel.createMessageComponentCollector({ filter, time: 15000 });

collector.on('collect', async i => {
    if (i.customId === 'id_1') {
        row.addComponents(
            but_1.setLabel('Click Registered!')
                .setCustomId('id_1_clicked')
                .setDisabled(true)
       )
       interaction.editReply({ content: "Click a button", components: [row] });
    }
});

Upvotes: 3

Views: 18288

Answers (1)

Fluxpuck
Fluxpuck

Reputation: 139

.addComponents() will just add to the existing components. Since the components is an array, you need to change row.components[0].setDisabled(true) (for but_1) and row.components[1].setDisabled(true) (for but_2) and edit the reply with the changed row MessageActionRow.

collector.on('collect', async i => {
    if (i.customId === 'id_1') {
        row.components[0].setDisabled(true) //disables but_1
    }
    if (i.customId === 'id_2') {
        row.components[1].setDisabled(true) //disables but_2
    }
    interaction.editReply({ content: "Click a button", components: [row] });
})

Upvotes: 5

Related Questions