• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

Sort by date Sort by votes
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.
 
Upvote 0 Downvote
It appears you are not waiting for the elements to load!
use this:

JavaScript: 
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 :)
JavaScript: 
$(document).ready(function(){
// js code inside here
});
 
Last edited:
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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...

JavaScript: 
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.

JavaScript: 
setTimeout(function(){
    if(userActive === false){
       clearInterval(IntervalLoop);
    }
}, 100000); // after 100 seconds, check if user is still here
 
Upvote 0 Downvote
Top Bottom