Track JavaScript event - javascript

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

Related

Javascript. How click on link in Javascript block?

I'm new to Javascript. I have a script that clicks on the ad unit on the site. But now I need to achieve the same in Javascript.I already have same script for Python+selenium, but now need on JS.
The object specified in the index.html javascript code
When the page loads the code is transformed into an ad unit, consisting of 3 images with links.
But it is necessary to click to start to get a reference At least one of the three blocks.
In Google Chrome, the function "View code" gives the following:
How to find and click on one of the three elements on the page with JS?
Find by xpath or ID or tagname?
Help me please! Thanks in advance!
Maybe this way helps m?...
<script type="text/javascript">
window.onload = function () {
var links = document.find_element_by_xpath("//a[contains(#href,'.xyz')]");
window.location = links;
}
</script>
If you want to trigger a click on a element using Javascript, you can try the following:
document.getElementById('element').onclick();
Here's the working fiddle:
https://jsfiddle.net/tbjbbt5a/

Javascript code to Jquery code not working

I have an image that is changed when I click on several links. The following javascript code works well :
<img src="myImage.png" id="mainImg" />
Report1
Report2
But I'm trying to change the code to use Jquery code instead. It calls the same server code as the javascript example. No errors are generated & a png is streamed back. But the image is not updated on the html page. To make things worst, the html moves to the top of the page. In the working javascript code, the image would fresh with a nice ajaxy feel where only the image would change & the rest of the page would not move. My Jquery code is below :
<img src="myImage.png" id="mainImg" />
Report1
Report2
<script type="text/javascript">
$(document).ready(function(e) {
$("#report1_id").click(function(e) {
alert("This Is Report1");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});
$("#report2_id").click(function(e) {
alert("This Is Report2");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport2.do?"+d.getTime());
});
});
</script>
Can anyone see what I'm doing wrong? Any help would be appreciated.
From your code, the image src should change, but maybe it doesn't change to what you'd like. Make sure that http://localhost/convertToReport1.do returns exactly what you need (ideally, you can specify that in the question itself).
The page jump happens because of the anchors href attribute. Either remove it, or prevent the default anchor behaviour in your click handler function, like this:
$("#report1_id").click(function(e) {
e.preventDefault(); // <--- this is the key, return false would also work at the end
alert("This Is Report1");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});
See it in action here: http://jsfiddle.net/egvac61c/

Struggling with onmouseover and onmouseout

I am struggling with onmouseover and onmouseout.
Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately. (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.
I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();
I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.
By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.
As always, any help is appreciated.
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions
Please go to following fiddle i have made some small changes and its working fine for me
fiddle
Also You could have used
<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
Mouse over this text
</div>
See working example here fiddle 2

jquery "if" something and "else" something

I am just curious how would anyone make this. I am trying to figure out with lack of knowledge and of course I cannot make it.
So it would be something like...
If in jquery there is declared onClick function something like "firstGateway" and "secondGateway" how can I add what if there is first and what if its second.
I can't even explain well.
But let me try.
<a onClick="firstGateway">YES FIRST!</a>
That would be html piece and jquery would need to run following:
<script type="text/javascript" src="http://fileice.net/gateway/mygate.php?id=492b542f45684b42"></script>
onClick=startGateway('123456');
and if it would be in html like this:
<a onClick="secondGateway">YES SECOND!</a>
Then jquery would run following:
<script type="text/javascript" src="http://fileice.net/gateway/mygate.php?id=4465766c4278366467523838"></script>
onClick=startGateway('654321');
Hope you understand me. I will still try to make it work but I do not think I will be able to succeed.
$('a').click(function(e){
if (e.target.innerHTML == "something")
//fooo
else
// Bar
});
You can check anything you want inside the callback. e.target is the anchor that was clicked.
if (e.target.id == "someId")
if ($(e.target).hasClass('fooClass'))
With your current code, if someone clicks on the link nothing happens. Let's fix that first of all:
This:
<a onClick="firstGateway">YES FIRST!</a>
Should be this:
<a onClick="firstGateway()">YES FIRST!</a>
If you want to execute the function firstGateway() whenever the user clicks that link. However, this is still not the best way and I'm going to show you a better way below. (Note that this better way is also needed for my final solution).
Now we turn this into:
<a id='gateway1'>YES FIRST!</a>
No longer do we define the event in the HTML, instead we do so in our javascript using jQuery:
$(document).ready(function ()
{
$('a#gateway1').click = firstGateway; // Do note: this time around there are
// no brackets
}
Using this, you can now do several things. First, you could do this:
$('a#gateway1').click();
It simulates a click on the link, which I believe does the thing you wanted to do.
However, in order to write your code, you have made sure that you knew what function you were connecting to it in your javascript, so you might not even need such a solution anymore as you should be able to do this:
$(document).ready(function ()
{
$('a#gateway1').click = firstGateway; // Do note: this time around there are
// no brackets
firstGateway();
}

JavaScript: changing the value of onclick with or without jQuery

I'd like to change the value of the onclick attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick attribute in HTML.) Here are a few things I tried:
Using jQuery attr("onclick", js) doesn't work with both Firefox and IE6/7.
Using setAttribute("onclick", js) works with Firefox and IE8, but not IE6/7.
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return is code passed to eval().
Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var js = "alert('B'); return false;";
// Set with JQuery: doesn't work
$("a").attr("onclick", js);
// Set with setAttribute(): at least works with Firefox
//document.getElementById("anchor").setAttribute("onclick", js);
});
</script>
</head>
<body>
Click
</body>
</html>
You shouldn't be using onClick any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See .click()
$(document).ready(function(){
var js = "alert('B:' + this.id); return false;";
// create a function from the "js" string
var newclick = new Function(js);
// clears onclick then sets click using jQuery
$("#anchor").attr('onclick', '').click(newclick);
});
That should cancel the onClick function - and keep your "javascript from a string" as well.
The best thing to do would be to remove the onclick="" from the <a> element in the HTML code and switch to using the Unobtrusive method of binding an event to click.
You also said:
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return in code passed to eval().
No - it won't, but onclick = eval("(function(){"+js+"})"); will wrap the 'js' variable in a function enclosure. onclick = new Function(js); works as well and is a little cleaner to read. (note the capital F) -- see documentation on Function() constructors
BTW, without JQuery this could also be done, but obviously it's pretty ugly as it only considers IE/non-IE:
if(isie)
tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
$(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index
Anyway, just so that people have an overall idea of what can be done, as I'm sure many have stumbled upon this annoyance.
One gotcha with Jquery is that the click function do not acknowledge the hand coded onclick from the html.
So, you pretty much have to choose. Set up all your handlers in the init function or all of them in html.
The click event in JQuery is the click function $("myelt").click (function ....).
just use jQuery bind method !jquery-selector!.bind('event', !fn!);
See here for more about events in jQuery
If you don't want to actually navigate to a new page you can also have your anchor somewhere on the page like this.
<a id="the_anchor" href="">
And then to assign your string of JavaScript to the the onclick of the anchor, put this somewhere else (i.e. the header, later in the body, whatever):
<script>
var js = "alert('I am your string of JavaScript');"; // js is your string of script
document.getElementById('the_anchor').href = 'javascript:' + js;
</script>
If you have all of this info on the server before sending out the page, then you could also simply place the JavaScript directly in the href attribute of the anchor like so:
Click me
Note that following gnarf's idea you can also do:
var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;
That will set the onclick without triggering the event (had the same problem here and it took me some time to find out).
Came up with a quick and dirty fix to this. Just used <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>
Hope this helps

Categories

Resources