Greasemonkey addEventListener not firing? - javascript

I've looked through various other questions about this and they are all fixed by using addEventListener rather than onclick. My problem now is, the events dont fire at all.
Basically I have an array of elements on my page which are "buttons", I then loop through that with this code:
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = "button";
buttons[i].style.width = "50px";
buttons[i].href = "#";
$(buttons[i]).bind('click',function (e) { alert("Hi"); }); //I have even tried jQuery. This isnt here when the line below is here.
buttons[i].addEventListener('click',function (e) { alert("Hi"); },false);
}
Heck I even tried loading it into a tag it just never works and I am unsure as to why. I have another user script on the same page which is able to bind on to things perfectly fine with the same method.
There is no errors in the console, just nothing happens. However when I make the function self invoke by adding () to the end of it, it runs the code when the page loads resulting in the alerts being shown.

Hmm, this is more about how to debug your greasemonkey code I think. I can't see anything wrong with the code.
I usually have 1 function to throw things to firebug:
function GM_log(element) {
unsafeWindow.console && unsafeWindow.console.log(element);
}
In this case, I'd be curious whether there are any buttons selected, so I'd log the buttons-array, and log something (in stead of an alert) in the click-functions.
Another possibility is to set the userscript in chrome, which allows you to debug the code there (firebug doesn't know the greasemonkey scripts code). But locating/altering the script is harder there, so it's only for when you are really lost.

Related

Something blocks addEventListener(type, handler) to work in DOM

I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)
As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});

JavaScript code is not executed during the runtime of the code, but when I debug it and execute in console, it works

I have a following code:
var e = document.getElementById("overlay");
e.parentNode.removeChild(e);
This code is supposed to remove the DOM element, but it doesn't. So I removed the code and added a breakpoint in its stead and input the code in the console during the pause manually, and it worked (i.e. the element was successfully removed).
This behavior seems rather strange for me, so I wanted to ask, why does it happen and what can I do to inspect this peculiar issue?
Thanks in advance.
EDIT: Thanks for quick replies. Nonetheless, I want to make it perfectly clear that the element #overlay does exist at the time of the execution of the code. Moreover, when I put a debugging breakpoint at that place in the code and execute these two lines of code, it does have an effect on this particular existent element (which it doesn't without debugging).
EDIT 2: I was asked to clarify the code. I execute the following code before the body (part of the queryloader2 plugin, which ensures image preloading):
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {});
});
No errors present (except for a 404 error because of missing image, which has no impact on Javascript).
As Teemu mentioned #overlay more than likely doesn't exist when the code is run.
For a test.. Try wrapping your code in either of these...
Javscript
window.onload = function () { /*your code*/ };
Jquery (if included)
$(document).ready(function () { /* your code*/ });
You should execute your code after the DOM tree has finished loading. One option is to wrap your code in a function that executes after the DOMContentLoaded event has been fired.
document.addEventListener("DOMContentLoaded", function(event) {
// your code
});
Look at this answer for more information: $(document).ready equivalent without jQuery

Dynamic CFTab onClose event

I simply can't find any real documentation on ColdFusion Layout Tabs. For the most part I've got them working, but I'd like to tie some logic to a close event. I was wondering if anyone had a working example they could show me? The catch is that I will need to trigger these events in JavaScript. But if you have a working version in plain ColdFusion, I'd still love to see it!
var tab = ColdFusion.Layout.getTabLayout("innerTabLayout").activeTab._cf_body;
$('#' + tab).on('close', blah); // doesn't work
tab.on('close', blah) // doesn't work
ColdFusion.Layout.getTabLayout("innerTabLayout").activeTab._cf_body.onTabClose( function(), blah ); //doesn't work
I have also tried setting the event on tab creation:
var tab = ColdFusion.Layout.createTab();
tab.onTabClose()
tab.on('close');
However, none of these work either. I've tried looking at EXT.JS which is what CFtabs were created from, but I don't seem to have any luck there either.
The Coldfusion.Layout object has a function for tab closing, so there must be a way to trigger it! (I would think, haha).
So after spending some too much messing around with the tab, I've got a solution.
ColdFusion.Layout.getTabLayout('innerTabLayout').activeTab.on('close', function(e) {
console.log(this) //this will return the tab object
console.log(e)//this also returns the tab object
});
This will trigger the event when the active tab within a parent is closed. I'm interested to see if there's another, better solution.

JavaScript button fires perfectly in Chrome and IE but won't work in Firefox

I'm sure the title looks like something that's been asked before but I've searched for the answer to this and I can't find it.
I'm really very new to coding, so please excuse any really obvious mistakes I've made.
Context to the code I'm working on: I'm in a Game Design class and I've decided to take up a personal project making an HTML JS game.
I understand that the code is possibly rough / bad / definitely-not-the-best-way-to-do-things, but it will continue to be so until I improve my skills (or am given advice on how to improve it).
What I need help with: For two to three weeks, I could not figure out how to get a button to appear when implemented inside of an if else statement.
Like so:
if(condition)
{
document.write("text");
//desired button here
}
else
{
//Backup code
}
Eventually I figured two ways to do that (for Chrome and Internet Explorer).
First way:
function myFunction()
{
document.close();
document.write("text");
/* There will be buttons in here
too when I get things working. */
}
//In separate script tags
/* myFunction() dwells in the head of the
page while the if statement is in the body
and another function*/
if(condition)
{
document.write("text");
var gameElement=document.createElement("BUTTON");
var text=document.createTextNode("CLICK ME");
gameElement.appendChild(text);
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
else
{
//Backup code
}
The second way:
(The same function, they're both in the same places).
if(condition)
{
document.write("text");
var gameElement;
gameElement = document.createElement('input');
gameElement.id = 'gameButton';
gameElement.type = 'button';
gameElement.value='Continue';
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
This works well for me.
And while it works in IE and Chrome fine, it doesn't work in Firefox.
After how much time and research I've put into just this button, I'd love to know why it won't show up in Firefox. I've read a lot about Firefox and how .onclick won't work or something like JavaScript has to be enabled or disabled. I'm just a bit confused.
I'm also open any real / relevant advice.
I set up this fiddle. I removed your document.write() calls because they're disallowed in JSFiddle, and change your condition to true so the code would work, and it works in FF24.
document.write() might be the cause of your problem. It's bad practice anyway because it can cause a re-parse of a document, or wipe the entire document and start writing it again. You're already using some DOM manipulation to add the button. I suggest you do likewise for anything you're considering using document.write() for.
Instead of suggesting a solution to your problem, I would suggest you take a look at jQuery, which is a very nice JavaScript framework, that makes it possible for you to write cross-browser compatible code, which it seems is your problem here.
Using jQuery, you would be able to write something like:
$("#gameButton").click(function() { myFunction(); }
which would trigger your myFunction() function, when the control with the id 'gameButton' is clicked.
Visit www.jquery.com to learn more

Chrome is not executing all lines in callback for jQuery animation

I have some code that animates a <div>. When the animation is complete, several things need to happen (mostly manipulation of CSS on various elements), so I naturally put them callback provided by jQuery's .animate();
It behaves as expected in Firefox. I can't tell whether or not it's an issue in IE because there are still some CSS issues preventing it from displaying properly there - I can't tell if it's the CSS or the same problem I'm having with Chrome. Regardless, for the moment, I'm focusing on Chrome.
One thing to note is that it doesn't happen if I do a console.log right before the line that's not being executed. Same if I insert a breakpoint and then let it continue.
$sliders.animate($thisSlideConfig, 250, function() {
$newPg.removeAttr('style');
$curPg = $newPg;
$curPgInf = plugin.getPgInf($curPg);
plugin.setIndTxt();
load2nav();
plugin.adjustNavState();
doCleanup();
});
The line nor being run is $newPg.removeAttr('style');
It doesn't seem to matter where in the block I put that line or how I select $newPg.
Oh yeah, I'm on Chrome 19.0.1084.52.
Removing the style attribute is unreliable. It may not trigger redrawing of the page (whereas a console log or a breakpoint force it to). Instead, try manually calling:
$newPg.style.XYZ = "";
For each style property you defined, if you can list them. If not, try this:
for( var x in $newPg.style) $newPg.style[x] = "";
These will trigger the correct redraw, and should hopefully stop the problem.

Categories