Claim + Drop Roles with Buttons (Discord.js v14)

Claim + Drop Roles with Buttons (Discord.js v14)
🌐 Important links:
Source code: github.com/not...
Discord.js series playlist: • Discord.js v14 Tutorial
Discord.js official website: discord.js.org
Patreon: / underctrl
Buy me a coffee (one-time donation): buymeacoffee.c...
Thank you for watching :)

[@devanshupadhyay2658]

This is the best tutorial, I am a beginner at js and trust me this helped me in understanding the language so well

[@radosawczuj1054]

Something worth mentioning is that the bot's role should be moved to the top of the hierarchy of the server, for it to be able to assign and remove other roles.

[@TVWomanOfficial-f7h]

It worked! I am so proud!

[@asifhossain8012]

well, this channel is really underrated!

[@que7244]

this is sick love it, i do want to ask how do you add it to a embeded message for OCD sake

[@cheesy_beatz]

i went to the link you have in your status in discord and i got rickrolled lmao

[@Dostendite]

Followed it step by step but the interaction doesn't work, I also had to add "ActionRowBuilder, ButtonBuilder, ButtonStyle" to the discord.js import to even make the "sendmessage.js" file work.
Is there any new or better way to do this?

[@ZeroBlue0956]

The code works and no bugs show up but the message isnt sent

[@islamicvideowithre]

amazing,, you are the best!

[@shoefu5954]

2:46 I cant run the bot because it says Cannot read properties of undefined (reading 'get') pls help

[@focalaxisssx5490]

at 5:18 you say to add a new row for every 5 roles, could you show an example of that?

[@TriLimitStudios]

In the first const with the roles make sure there is only 5 then create a second one if you have more then 5 then client should be set like this:
client.on('ready', async (c) => {
try {
const channel = client.channels.cache.get('1091397837138432090')
if (!channel) return;
const row = new ActionRowBuilder();
const row2 = new ActionRowBuilder();
roles.forEach((role) => {
row.components.push(
new ButtonBuilder()
.setCustomId(role.id)
.setLabel(role.label)
.setStyle(ButtonStyle.Primary),
);
});
roles2.forEach((role) => {
row2.components.push(
new ButtonBuilder()
.setCustomId(role.id)
.setLabel(role.label)
.setStyle(ButtonStyle.Primary),
);
});
await channel.send({
content: 'Select which ping roles you would like, press a second time to remove.',
components: [row, row2]
});

[@rhino6070]

@@TriLimitStudiostysm

[@neodevils]

Although it's going to be built-in on Discord, good work.
Can you make videos about ES6 module with classes?

[@UnderCtrl]

Thanks. I’ll cover ES6 modules in my JavaScript series

[@neodevils]

@@UnderCtrl Thank you so much, I will waiting for it 👍🏻.

[@heppersx]

Is it possible to make it so users can only chose one role?

[@Bluei2h]

tysm!

[@spotstudies]

Also one more doubt, at 06:11, you said if we have other slash commands, then we should open curly brackets, so from where to where should the curly brackets be?

[@joybumbershoot]

I know this is an old comment but I'll give an answer for those who had this question as well,
If you also have old slash commands from this series or any other,
What I did is just put the code for the roles at top (when I put it bottom it didn't work for some reason) and it should work
_client.on("interactionCreate", async (interaction) => {_
_if (interaction.isButton()) {_
_// Your roles code_
_}_
_// Other slash commands_
_});_

[@supercutswft]

@@joybumbershoot omg thank you so much i had so much trouble trying to find out why my code wasn't working

[@joybumbershoot]

@@supercutswft No problem glad I could help

[@XStarReviews]

Is it possible to set the role assignment message as an embed and use emojis as the reaction button? Kind of similar to the Carl bot to where the emoji button is highlighted if that user has that role and won't send a message to the channel if the user assigns themselves that role? Sorry hard to explain without showing a picture lol

[@UnderCtrl]

Hi. That’s certainly possible, and I’d suggest joining my Discord so we can help you from there :) ctrl.lol/discord

[@T3DDY_TTV]

pls Tutorial for more as 5 Buttons pls

[@MelhAogl]

Thanks for this useful tutorial

[@aalekh8830]

I had a small doubt here , at 6:12 , when you mentioned that if you have / commands , add them in the { } , Can you explain that thing in a bit detail please , Been following the guide from the start , and I have every / command in the code , from the previous video's , Thank you

[@UnderCtrl]

If you don't have a command handler and you want to handle slash commands using the interactionCreate event listener, then you'd have to specifically handle your button interactions within those curly { } brackets. I realized now looking back at the video, I should've said something like "If you have your slash command logic within this same interactionCreate event listener, you need to add the button handling code in the { } so it's kind of its own scope and separate from the slash commands logic".

[@aalekh8830]

Oh , so what u meant was to add only the button interactions within the { } , at first I thought you meant like the whole / commands code , and I in fact did that , and got confused , so wanted to ask you about that . Thank you for the help
@@UnderCtrl

[@aalekh8830]

Hey , sorry to be back at this again , But I seem to have been a little lost with this certain thing , the code runs fine to the part where the button command is not there , but when I paste it there ( previously cut from here ) , the bot begins to crash even on those command , which were running fine earlier. Can you please help me out here again , thank u .
@@UnderCtrl

[@Unlucky403]

I have this in my bot im working on using your event handler, and I have transitioned it over pretty well, but I cant get the bot to stop posting the message every single time it starts. Is there a simple way to do this that im missing?

[@dariusverse]

add "//" before the command and it should ignore it, later when u want to add another, just remove the "//" and edit the command and you're good to go (im not sure if this works but this is what I would do)

[@spotstudies]

I had a doubt that I did not understand what did you say for more than 5 roles. Then what to do? 05:12

[@TriLimitStudios]

In the first const with the roles make sure there is only 5 then create a second one if you have more then 5 then client should be set like this:
client.on('ready', async (c) => {
try {
const channel = client.channels.cache.get('1091397837138432090')
if (!channel) return;
const row = new ActionRowBuilder();
const row2 = new ActionRowBuilder();
roles.forEach((role) => {
row.components.push(
new ButtonBuilder()
.setCustomId(role.id)
.setLabel(role.label)
.setStyle(ButtonStyle.Primary),
);
});
roles2.forEach((role) => {
row2.components.push(
new ButtonBuilder()
.setCustomId(role.id)
.setLabel(role.label)
.setStyle(ButtonStyle.Primary),
);
});
await channel.send({
content: 'Select which ping roles you would like, press a second time to remove.',
components: [row, row2]
})

[@prithvibiswal69]

@@TriLimitStudios thanks brooooo thank you!

[@TriLimitStudios]

@@prithvibiswal69 Np

[@devZeus]

Thanks but it says "Error" and that im 'Missing Permissions'

[@kamiellankveld2181]

To fix that error you have to drag the role that your discord bot has higher than the role you are trying to give to the user.

[@pac_9gamer488]

thx!!!!!!!!!!!!!!!!!

[@SpamSubscribe2024]

This is True?? Wow I'll Comment Back Here if i redeem the Code Sir!!! Thanks

[@UnderCtrl]

What code xD?