JavaScript button on press function isnt working even after <script> tag.

[TableFlipGod]

My button on press function doesnt work.

my code is here

*relevant help
manager.html
DBScripts/GuiCommands.js

Discord Bot Cleaner - CodeSandbox

Discord Bot Cleaner by TableFlipGod1 using @babel/core, @babel/plugin-syntax-dynamic-import, discord.js, jquery

codesandbox.io

 

[Malcolm]

Hey @TableFlipGod,

Thanks for looking to Code Forum for help! In order for us to help you better can you also include the code within your thread post that is relevant to your issue. It makes it easier for people who are trying to help you look over your code and provide you with a swift and detailed response.

You can visit https://codeforum.org/help/bb-codes/ under Code - Programming code display for reference on posting code.

 

[TableFlipGod]

It helps if you make an event listener on a file and run that file

 

[Malcolm]

It helps if you make an event listener on a file and run that file

How would you do this?

 

[Ghost]

It appears you are not waiting for the elements to load!
use this:

window.ready = function(){
// all of your GUICommands.js code inside here    
}

Your JS is attempting to target / select (with querySelector) the buttons before they are fully loaded on the page.
For that reason, the event listener is targeting "null" because the querySelectors couldn't select anything (because button didn't exist yet).

The window.ready = function(){ } will change this because it says "only execute this JS when the window is done loading".
You can also use things that check for the document being ready as opposed to the whole window.

This should fix it up 🙂

You should also check to make sure the document (DOM) or Window is ready / fully loaded before executing JS.
In jQuery you can use this... but you're using Core JS, so use the example above 🙂

$(document).ready(function(){
// js code inside here
});

 

[TableFlipGod]

Thank you

 

[Malcolm]

Thank you

I hope you were able to find your answer! If you have found the answer you were looking for don’t forget to mark best answer or share the solution if you found it somewhere else so if members at CodeForum run into a similar issue they have something to look at.

 

[theLMGN]

I noticed how you're using a while (true) loop in your code.

You should never use a while (true) loop in JavaScript, It'll freeze browsers (and your entire program in nodeJS). Use setInterval instead, like so


[CODE lang="javascript" title="menustuff.js" highlight="34-46"]var script1 = require("./main");
var Logger = require("./util");
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.querySelector(".guildmenu");
var subdropdown = document.querySelector(".Guild-Channels");

var dropdown_ = document.getElementsByClassName("Guilds");
var i;

module.exports.AddGuildsXD = function() {
var Guilds_ = script1.GetGuilds__();
var Channels_ = script1.GetChannels__();

Guilds_.forEach(name => {
var AGuild = document.createElement("button");
AGuild.className = "Guilds";
AGuild.className = "dropdown-btn";
AGuild.innerHTML = name;
var Ithing = document.createElement("i");
Ithing.className = "fa-caret-down";
Ithing.className = "fa";
AGuild.appendChild(Ithing);
var Thingy = document.querySelector(".guildmenu");
Thingy.appendChild(AGuild);
});

Channels_.forEach(name => {
var AChannel = document.createElement("a");
AChannel.innerHTML = name;
subdropdown.appendChild(AChannel);
});
};

setInterval(function() {
for (i = 0; i < dropdown_.length; i++) {
dropdown_.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
}, 15) // 15ms is used as an interval
[/CODE]

 

[Malcolm]

I'm currently learning JS, it's great to know this! Thanks for sharing. 🙂

 

[Ghost]

that's a good catch, I didn't even notice that!
This will indefinitely loop and be problematic for sure. Good idea to recommend setInterval. However, I am struggling to see why there should be a loop or interval in the first place. They are adding an event listener to some items & those will stay... No need to reapply. If the event listeners are being removed somewhere, they should be reapplied on an action, not on an interval. I may be wrong, but I think that code will work fine without while(true) - duh - AND also without an interval.

BUT while we're on the topic, I mind as well make some recommendations about the interval functions for JS.
You can also use setTimeout if you want to cancel the loop at some point like this...

var IntervalLoop = setInterval(function(){
    // do stuff here
}, 10000); // do it every 10 seconds

setTimeout(function(){
    clearInterval(IntervalLoop);
}, 100000); // after 100 seconds, run this...

In that example you have set up a variable (intervalLoop) to represent the code that runs every 10 seconds.
We do this so that you can also use setTimeout() to STOP the code from running after 100 seconds.

You could do something like this too... This would only stop the code if userActive = false, so you could use different code to track if the user is still on the page or not.
This prevents scripts from running non stop even if the user is not there. For example, this can come in handy with chatroom or forum thread auto-refresh/load scripts to prevent database requests when a user leaves a page open on their screen but isn't actually at the computer. Of course, you would need to come up with the logic to decide if/when userActive should be true/false.

setTimeout(function(){
    if(userActive === false){
       clearInterval(IntervalLoop);
    }
}, 100000); // after 100 seconds, check if user is still here