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", ponents: [row] })

I tried creating message ponent 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", ponents: [row] });
    }
});

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", ponents: [row] })

I tried creating message ponent 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", ponents: [row] });
    }
});

• javascript
• node.js
• discord.js

1 Answer 1

.addComponents() will just add to the existing ponents. Since the ponents is an array, you need to change row.ponents[0].setDisabled(true) (for but_1) and row.ponents[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.ponents[0].setDisabled(true) //disables but_1
    }
    if (i.customId === 'id_2') {
        row.ponents[1].setDisabled(true) //disables but_2
    }
    interaction.editReply({ content: "Click a button", ponents: [row] });
})