Develop Reference

Track JavaScript event

I have GA on my website and i'm trying to track every click on the website. The following JavaScript must be used, it acts like an overlay on the page:
<script type="text/javascript">
var tile = new HTMLLiveTile.TileController();
window.onmousedown = function() {
tile.openStoreProduct("var1", "var2", "var3");
}
</script>
What would be the HTML equivalent code to track this?
Right now i have:
<a id="tile" onClick="ga('send', 'event', 'click1', 'click2', 'sample');"><img src="./images/image.png"> </a>
I'm very new to this, sorry if it's redundant. My assumption was to track the variable and add it to the onClick.

I guess you are asking for a solution that does not require much hassle and much changing in code and moreover without any need to change your previous code.
you can use event.target.+ things you need to know to get info.
function mouseTrack(){
var element_name = event.target.tagName;
alert("mouse click was detecteted at: "+ element_name);
}
window.addEventListener('click', mouseTrack(), false);
this code will alert the Tag Name of Element clicked (like DIV, a, SPAN etc you know the list.). But this code is awful.It wont work in Mozilla FF, It wont work In IE 9 below. I took some time to create a fiddle on JSFiddle.net you can view example I made Here

What specifically will successfully trigger a JavaScript click event in JSFiddle?

I was toying around with trying to get events-on-button-click to work where the JavaScript code triggers some event once a specific button is clicked.
There are no issues when I attempt to do on-click triggers in my project(s), but I just can't seem to get it to work using JSFiddle.
I first followed the tips here: JavaScript not running on jsfiddle.net
Specifically, the part where meder omuraliev writes, "So instead of
<p onclick="lol()" id="foo">
you'd do
var e = document.getElementById('foo');
e.onclick = lol;
in the JS only."
I attempted to follow this instruction which can be seen in the simple example I made here (that doesn't work): https://jsfiddle.net/b7yj3cph/3/
var e = document.getElementById('test');
e.onclick = example;
var example = function( {
alert("hello");
});
<button id='test' type="button" onclick="example()">
<div>
Hello
</div>
I tried other sources and methods but couldn't get any to work. I attempted an example from W3Schools (https://jsfiddle.net/b7yj3cph/) and tried some JSFiddles from searching "jsfiddle button onclick" (https://jsfiddle.net/Dogbyte/62cd0LLq/) which some didn't work.
But some did; like this one (http://jsfiddle.net/lesson8/h4JXs/1/) seems to work fine.
What is uniquely going on that makes the click trigger work for some JSFiddles and not for others? I suspect it has to do with the $(document).ready() part but I've been reading various ways to get this to work and I can't find anything that makes sense to me.
Going back to the Stack Overflow thread that I shared earlier, the top-voted response there had 3 suggestions:
"( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global."
Well, in the JSFiddle posted here that works as expected, there is no use of window. Attempts that I made to use window proved to be fruitless.
"( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from
JS."
This is a great point and makes sense but still didn't solve my particular
issue.
"Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head )."
My particular example isn't wrapped in onLoad(at least, I don't think that it is). Anyways, thanks!

You have two issues in your fiddle:
Firstly your example function is declared incorrectly:
var e = document.getElementById('test');
e.onclick = example;
var example = function( { // parenthasis should be closed before opening braces
alert("hello");
});
Should be:
var e = document.getElementById('test');
e.onclick = example;
var example = function() {
alert("hello");
}
Secondly, you are declaring the var example below the onclick assignment which is being interpreted as:
e.onclick = undefined
Just move the var example above the e.onclick and fix the syntax issue and it will work:
var e = document.getElementById('test');
var example = function() {
alert("hello");
}
e.onclick = example;

This is the way if you don't want to wait for the DOM to be loaded.
document.getElementById('btnSave').addEventListener('click',() => {
alert('clicked the damn button!');
});
The reason attaching something to .onclick doesn't work is because, for that, you do have to wait for the DOM to load; order of operations is really important in this case.

why do my onClick functions take two clicks

I've noticed from a few different projects of mine that whenever I click something I add an onClick function to, it always takes two clicks to get them going when a page is freshly loaded. The general structure I use for them is:
function PageChange(){
var welc_p = document.getElementById("welcome");/**gathers page DIVs**/
var page01 = document.getElementById("page01");
var page02 = document.getElementById("page02");
var start = document.getElementById("start_btn");/**gathers buttons**/
var p1_back = document.getElementById("p1_back");
var p1_next = document.getElementById("p1_back");
var p2_back = document.getElementById("p2_back");
var p2_next = document.getElementById("p2_back");
start.onclick=function(){
page01.style.display="block";
welc_p.style.display="none";
window.location="#page01";
};
}/**function**/
then the way I call it in the html is
<div class="some_class" id="start_btn" onClick="PageChange()">!!!LETS GET STARTED!!!</div>
Here's a fiddle of it as well.
https://jsfiddle.net/Optiq/42e3juta/
this is generally how I structure it each time I want to create this functionality. I've seen tons of other posts on here about their items taking 2 clicks to activate but none of them were doing anything near what I was trying to accomplish and it seemed their problem was within their coding. Does anybody know why this is happening?

This is because you are attatching a event handler to your button on click of your button.
This means that one click of the button activates the event handler, not the code within start.onclick=function() {
Then, the second click works becasue the event handler has been activated, and now the code will run.
Try moving your code out of the function, then it will work with just one click

Just had the same issue, and found an easy solution based on the above answer.
Since your function needs two clicks to work, I just called the function above the function and it works fine. This way the function already gets called one time on load, then it gets called the second time when you click it.
yourFunction();
function yourFunction(){
-- content --
}

I also had the same 2 clicks required on intitial interaction and after many searches couldn't find the best solution for my specific nav menu. I tried this solution above but couldn't get it to work.
Stumbled upon this code from a youtube example and it solved my issue. I wanted to nest submenu's for multiple levels and modified it from its original implementation to work best for my responsive mobile menu.
var a;
function toggleFirstLevelMobileSubMenu(){
if(a==1){
document.getElementById("mobile-sub-menu-depth-1").style.display="none";
return a=0;
}
else {
document.getElementById("mobile-sub-menu-depth-1").style.display="flex";
return a=1;
}
}
var b;
function toggleSecondLevelMobileSubMenu(){
if(b==1){
document.getElementById("mobile-sub-menu-depth-2").style.display="none";
return b=0;
}
else {
document.getElementById("mobile-sub-menu-depth-2").style.display="flex";
return b=1;
}
}
Of course, in the CSS I had display: none set for both ID's.

First, the problem:- On first click instead of running js your browser runs the button aka the event.
Solution:- in order to resolve this we need to make sure our function is already before the event is run (this is one of the ways to solve the problem). To achive this we need to load the function aka call the function in some way.
So, i just simply called the function after function is completed.
Code answer-
Just add at the end of your code
PageChange();

Javascript onclick event firing for id but not for class

I'm fairly new to Javascript, and am trying to get an 'on click enlarge' kind of effect, where clicking on the enlarged image reduces it again. The enlarging happens by replacing the thumbnail by the original image. I also want to get a slideshow using images from my database later on.
In order to do that, I made a test where I replace the id which indicates enlarging is possible by a class and I also use a global variable so that I can keep a track of the url I'm using. Not sure this is the best practice but I haven't found a better solution.
The first part works fine, my image gets changed no problem, values are also updated according to the 'alert' statement. However, the second part, the one with the class never triggers.
What am I doing wrong (apart from the very likely numerous bad practices) ?
If instead of changing the class I change the id directly (replacing .image_enlarged by #image_enlarged, etc.), it seems to call the first function, the one with the id, yet outputs the updated id, which is rather confusing.
var old_url = "";
$(function(){
$('#imageid').on('click', function ()
{
if($(this).attr('class')!='image_enlarged'){
old_url = $(this).attr('src');
var new_url = removeURLPart($(this).attr('src'));
$(this).attr('src',new_url); //image does enlarge
$(this).attr('class',"image_enlarged");
$(this).attr('id',"");
alert($(this).attr('class')); //returns updated class
}
});
$('.image_enlarged').on('click', function (){
alert(1); //never triggered
$(this).attr('src',old_url);
$(this).attr('class',"");
$(this).attr('id',"imageid");
});
});
function removeURLPart(e){
var tmp = e;
var tmp1 = tmp.replace('thumbnails/thumbnails_small/','');
var tmp2 = tmp1.replace('thumbnails/thumbnails_medium/','');
var tmp3 = tmp2.replace('thumbnails/thumbnails_large/','');
return tmp3;
}
As for the html, it's really simple :
<figure>
<img src = "http://localhost/Project/test/thumbnails/thumbnails_small/image.jpg" id="imageid" />
<figcaption>Test + Price thing</figcaption>
</figure>
<script>
document.write('<script src="js/jquery-1.11.1.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://localhost/Project/js/onclickenlarge.js"></script>

From the API: http://api.jquery.com/on/
The .on() method attaches event handlers to the currently selected
set of elements in the jQuery object.
When you do $('.image_enlarged').on(...) there is no element with that class. Therefore, the function is not registered in any element.
If you want to do so, then you have to register the event after changing the class.
Here's an example based on your code: http://jsfiddle.net/8401mLf4/
But this registers the event multiple times (every time you click) and it would be wrong. So I would do something like:
$('#imageid').on('click', function () {
if (!$(this).hasClass('image_enlarged')) {
/* enlarge */
} else {
/* restore */
}
}
JSfiddle: http://jsfiddle.net/8401mLf4/2/

Try using:
addClass('image-enlarged')
instead of:
.attr('class',"image_enlarged");
the best way to do this would be to have a small-image class and a large image class that would contain the desired css for both and then use addClass() and removeClass depending on which you wanted to show.

Button states in quiz application

I am making a quiz similar to buzzfeed quizzes like THIS. I have the logic planned out and I can kind of see how I'm supposed to code it to act similarly to the one in the link, but I have a problem with the button states.
Here is a fiddle of my code: sample quiz
$(document).ready(function () {
$('#btn1, #a1').click(function () {
$('#a1').removeClass("fadeout");
$('#a1').addClass("highlight");
$('#a2').removeClass("highlight");
$('#a3').removeClass("highlight");
$('#a4').removeClass("highlight");
$('#a5').removeClass("highlight");
$('#a6').removeClass("highlight");
$('#a2').addClass("fadeout");
$('#a3').addClass("fadeout");
$('#a4').addClass("fadeout");
$('#a5').addClass("fadeout");
$('#a6').addClass("fadeout");
btn1.checked = "true";
btn2.checked = "";
btn3.checked = "";
btn4.checked = "";
btn5.checked = "";
btn6.checked = "";
window.alert(document.write(getElementById("btn1").value));
Coding a single question does not seem to be a problem with the ff: change color on hover, reduce opacity of other choices, change to color blue once selected, etc... but as I add more questions, I realized I would have to use addClass and removeClass for the button's effects for every choice for every question, which, as you can see, wouldn't be so practical to code.
Are there any other more efficient ways to do this?

Using the click event of the question div you can apply the classes by using the $this keyword.
$(document).ready(function () {
$('.a_choice').click(function () {
$(this).siblings().removeClass("highlight");
$(this).siblings().addClass("fadeout");
$(this).children('input').prop('checked', true);
$(this).addClass('highlight');
$(this).removeClass("fadeout");
});
});
See http://learn.jquery.com/javascript-101/this-keyword/

Add a class to each button and get them by class instead of by id
$('.quizbuttons').removeClass("fadeout");
The buttons should have the class "quizbuttons" like:
<button class="quizbuttons"></button>
Or whatever element you are using.
Best.