We Keep Coding

Javascript click event doe not work on wordpress

I need to call a function by clicking on some elements.
I have tried several ways but it seems that it does not want to fire.
the element in question is generated by the "quiz master and survey" plugin on wordpress.
Anyone have any idea what the problem might be? Thanks in advance!
window.onload = function() {
document.querySelectorAll('.qsm_check_answer').addEventListener("click",function(e){
var correctInfo = document.querySelector('#correct-info');
correctInfo.classList.add("d-none");
});
};
OR
document.querySelectorAll(".qsm_check_answer").addEventListener("click", function () {
document.querySelector("#correct-info").style.display = "none";
});
OR
window.onload = function () {
var checkboxQ = document.querySelectorAll(".qsm_check_answer");
checkboxQ.onclick = function () {
var correctInfo = document.querySelector("#correct-info");
correctInfo.classList.add("d-none");
};
};
Screenshot of Dom:

querySelectorAll returns all elements in the document that matches the selector.
You need to access the elements with an index:
document.querySelectorAll(".qsm_check_answer")[0]
Here is a link to more info on MDN.

Triggering fluffy.js

I'm trying to make a simple tumblr theme using the fluffy plugin (https://github.com/mzdr/fluffy.js) but I've ran into a problem. The plugin only executes once on page load. I'm trying to get it to work with the infinite scroll plugin (http://www.infinite-scroll.com/) and I need the fluffy plugin to trigger whenever new content loads.
I'm fairly new when it comes to JS so I appreciate any help I can get. Thanks.
Edit added code:
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script src="http://static.tumblr.com/hpghjri/co2nfnr1j/infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/nxwjyyg/XWUob8gtq/fluffy.min.js"></script>
<script>
$(function(){
app.initInfinite();
app.onImagesLoad();
}); //end document ready
var app = {
'initInfinite' : function() {
var $container = $('.page-index .posts');
$container.infinitescroll({
navSelector:".pagination",
nextSelector:".pagination-next",
itemSelector:".posts__container",
appendCallback:true,
loading:{
finishedMsg:" ",
img:"data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
msg:null,
msgText:" ",
selector:null,
finished:function() {
}
}
},
function(newElements) {
var $newElems = $(newElements).css({opacity:0});
var $newElemsIDs = $newElems.map(function() {
return this.id;
Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
}).get();
$newElems.imagesLoaded(function() {
$newElems.animate({opacity: 1});
//what to do when new elems appended
// I need to trigger fluffy here
});
var $newElemsIDs = $newElems.map(function() {
return this.id;
}).get();
Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
});
},
'onImagesLoad' : function() {
$('.content .posts').imagesLoaded()
.always( function( instance ) {
console.log('all images loaded');
$('.overlay').addClass('hide');
$('.overlay__preloader').attr('class', '');
})
.done( function( instance ) {
console.log('all images successfully loaded');
});
}
}
</script>

This is your lucky day! I just released v2.1.0 which fixes your problem. Now you can create Fluffy objects on the fly like that:
// Start automatic detection
Fluffy.detect();
// Or provide a DOM node for single creation
var myElement = document.querySelector('#what-ever-you-like');
Fluffy.create(myElement);
// Or use a selector to create one
Fluffy.create('[data-fluffy-container]');
Don't forget to check out the updated docs.

jQuery conflicting with another on one page

I'm having an issue with my jQuery noConflict. The page that I'm trying to put the jQuery on has a drop-down navigation that already uses the noConflict() rule. Can I use more then one noConlfict on a page for different animations? I will have 3 different jQuery functions running simultaneously on one page. Separately they work fine, but once added together on a page they stop working. Below is one of the jQuery's that needs to run. Can someone help me add the noConflict() rule to it?
$(function() {
var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,5000);
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
if(!repeat)
$this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src', info_elem.find('.info_image').html())
);
}
});

As #adaneo already commented, you always should wrap you code into the jQuery method but after that you even should call noConflict with the first parameter true:
$.noConflict(true);
This removes your jQuery completely from the jQuery and $ variable and returns a jQuery object. You can use that return value to use it in your code by giving it to your object or method as parameter:
function MyFunction($) {
$(doSomeThing);
}
MyFunction($.noConflict(true));

Mixin for a JQuery selector

Is it possible to create a mixin for a jQuery selector (please note, I don't need no plugins, they are just too bulky for what I'm doing)?
Here's the task I'm trying to accomplish:
// Given a div I need to paint it with green for which...
var $container = $("#id001");
// current solution
var do = function(e) {
var container = e.container;
container.css("backgroudColor", "green");
};
do({ container: $container }); // call
// desired solution
var do**Mixin** = function(e){
e.css("backgroudColor", "green");
};
container.do(); // call

I know you said you don't need a plugin, but a plugin for what you need is very simple:
function($){
$.fn.makeItGreen = function(){
return this.each(function() {
this.css({
'background-color': 'green'
});
});
}
)(jQuery));
Use:
$(yourSelector).makeItGreen();
Untested, but....pretty sure it should work as is.
Fiddle (courtesy of Jamiec):
http://jsfiddle.net/mPu6X/

Are you looking for something like this? http://jsfiddle.net/WDmjS/
​jQuery.prototype.do = function(){
this.css("background-color","green");
return this;
};
$(".mydiv").do();
​More concisely written:
​$.fn.do = function(){
return this.css("background-color","green");
};

You can make a custom event:
$('selector').on('changeToGreen', function(){
$(this).css("backgroudColor", "green");
});
To "do" it:
$('selector').trigger('changeToGreen');

Unintuitive removeClass() problem

I'm using this flip plugin, see the code in this fiddle. The goal is to flip one box at a time, e.g. the second box clicked should revertFlip() the previous one. During the animation I don't want the other boxes to be clickable. I noted that the removeClass() is not working.
<div class='flippable'>I'm unflipped 1</div>
...
<div class='flippable'>I'm unflipped 9</div>
$('.flippable:not(.reverted)').live('click',function()
{
var $this = $(this);
var $prevFlip = $('.reverted');
var $allBoxes = $('.flippable');
$this.flip(
{
direction: 'lr',
color: '#82BD2E',
content: 'now flipped',
onBefore: function()
{
$prevFlip.revertFlip();
$prevFlip.removeClass('reverted');
},
onAnimation: function ()
{
$allBoxes.preventDefault();
},
onEnd: function()
{
$this.addClass('reverted');
}
})
return false;
});
I'll appreciate a lot your advise and suggestions.
Edit:
Error Console Output: $allBoxes.preventDefault is not a function

I believe this has something to do with revertFlip() calling onBefore and onEnd. This is causing some weirdness with addClass and removeClass. Check out my modified example: http://jsfiddle.net/andrewwhitaker/7cysr/.
You'll see if you open up FireBug that onBefore and onEnd are called multiple times, with I think is having the following effect (I haven't exactly worked out what's going on):
The call to onEnd for the normal "flip" sets reverted class for the desired element.
The call to onEnd for the "revert flip" action sets the same element as above again when onEnd is called.
Here's a workaround. I've taken out using onBegin and simplified onEnd since I'm not exactly sure what's going on with the revertFlip() call:
$(function() {
var handlerEnabled = true;
$('.flippable:not(.reverted)').live('click', function() {
if (handlerEnabled) {
var $this = $(this);
var $prevFlip = $('.reverted');
var $allBoxes = $('.flippable');
handlerEnabled = false;
$prevFlip.revertFlip();
$prevFlip.removeClass("reverted");
$this.addClass("reverted");
$this.flip({
direction: 'lr',
color: '#82BD2E',
content: 'now flipped',
onEnd: function() {
handlerEnabled = true;
}
});
}
return false;
});
})
I'm using a boolean flag to enable and disable the event listener. Try out this example: http://jsfiddle.net/andrewwhitaker/bX9pb/. It should work as you described in your OP (only flipping one over at a time).
Your original code ($allBoxes.preventDefault()) is invalid, because $allBoxes is a collection of elements. preventDefault is a function on the jQuery event object.

Can you try this script
var $prevFlip;
$('.flippable:not(.reverted)').live('click',function() {
var $this = $(this);
var $allBoxes = $('.flippable');
$this.flip( {
direction: 'lr',
color: '#82BD2E',
content: 'now flipped',
onBefore: function() {
if($prevFlip){
$prevFlip.revertFlip();
$prevFlip.removeClass('reverted');
}
},
onAnimation: function () {
//$allBoxes.preventDefault();
//This is not a valid line
},
onEnd: function() {
$this.addClass('reverted');
$prevFlip = $this;
}
});
return false;
});
This reverts only one previous item. This is not a complete solution. I think there are more problems to this. I'll post any further updates if I found them.
I think #Andrew got the answer you are looking for.

You can filter $this out of $allBoxes by using the not() method.
$allBoxes.not($this).revertFlip();