Develop Reference

GTM Custom Javascript Variable not working (return function)

I've been looking at this for days now and am totally stuck. The page I am working with looks like this:
<div class="field--item">
<span class="file file--mime-application-pdf file--application-pdf icon-before">
<div class="file-info text-center--mobile"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><div class="file-wrapper"><span class="file-name">17840.pdf</span><span class="file-size">94.35 KB</span></div></div>
<span class="file-link">Download
</span></span></div>
The custom variable that I set up looks like this:
function() {
return document.getElementsByClassName('resource-button')[0].getAttribute('resource-name').text();
}
What I really want to do is set up a variable that pulls in the resource name, when the Download button is clicked. I know to set up the actual click tracking etc. separately, I just can't get this function to pull through anything to the variable other than 'defined'.
Any help or a nod in the right direction would be sooo very much appreciated. Thanks!

Try removing the text() function at the end:
function getAttribute() {
return document.getElementsByClassName('resource-button')[0].getAttribute('resource-name');
}
console.log(getAttribute());
<div class="field--item">
<span class="file file--mime-application-pdf file--application-pdf icon-before">
<div class="file-info text-center--mobile"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><div class="file-wrapper"><span class="file-name">17840.pdf</span><span class="file-size">94.35 KB</span></div></div>
<span class="file-link">Download
</span></span></div>

perhaps you can use a click event:
Download
<script>
function myFunction(elem) {
var yourAttribute = elem.getAttribute('yourAttribute');
}
</script>

How to get the Id of parent ancher tag of custom action?

using Jquery am trying to get the id of parent ancher tag of custom Action(Ribbon) in sharepoint but am unable to get it.
My HTML is as like
<a unselectable="on" href="javascript:;" onclick="return false;" class="ms-cui-ctl-large " mscui:controltype="Button" role="button" id="{E549A47E-BA3E-4D2B-A496-5B9C077A875F}-Large">
<span unselectable="on" class="ms-cui-ctl-largeIconContainer">
<span unselectable="on" class=" ms-cui-img-32by32 ms-cui-img-cont-float"></span>
</span>
<span unselectable="on" class="ms-cui-ctl-largelabel">Custom Action<br></span>
</a>
and this is the script am aplying to get the Id
<script type="text/javascript">
$(document).ready(function(){
var ttle=$("input[title='custom Action']")[0].parent().attr('id');
alert(ttle);
});
</script>
here is snap of screen
but it is not working.
is there any solution for that?

this "$("input[title='custom Action']")[0]" is a dom object!
cover it with another $ sign and it would work!
var ttle=$($("input[title='custom Action']")[0]).parent().attr('id');
alert(ttle);

Selecting element with JS issue

Please help me to understand this. I have HTML code like this:
<div id="one">
<div>
<div>
<span class="spanone"></span>
<span class="spantwo"></span>
<div>
</div>
</div>
.
.(some other html of the page)
.
<sometag class="spanone"></sometag>
<someothertag class="spantwo"></someothertag>
And I basically want to target only the first <span> and the second by JS without touching the sometags elements. In other words the: <span class="spanone"> and <span class="spantwo">. And then I want to use innerHTML to replace the code with the one I want.
Thanks!

var spanone = document.querySelector('.span1');
var spantwo = document.querySelecftor('.span2');
spanone.innerHTML = "Replacement";
spantwo.innerHTML = "Replacement";

You can achieve this in a couple ways
Use id
<span class="spanone" id="myspan1"></span>
<span class="spantwo" id="myspan2"></span>
so in vanilla JS
var d = document;
d.getElementById('myspan1');
d.getElementById('myspan2');
or with classes
<span class="spanone myspans"></span>
<span class="spantwo myspans"></span>
and in your JS
d.querySelectorAll('.myspans')

This should work:
var spanone = document.querySelector('.spanone')[0];
var spantwo = document.querySelecftor('.spantwo')[0];

How to get id of anchor tag, regardless of where it is in hierarchy?

I want to get the id/class/both of the anchor tag, regardless of where it falls in the tag hierarchy. Example below is strange but realistic for my purposes because our website is accessed through a CMS that I have no control over. If people add multiple levels of formatting at different times, the CMS likes to add new span's...
So, having the live with the above facts, I want to pin down specific anchor tags by their id/class/both, but I don't always know where they will be located in the tag drill-down.
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I have started off like such,
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var telm = event.target.parentNode.className;
var delm = 'anchor_id_A';
console.log(telm);
if (telm == delm) {
dataLayer.push({
'youClicked': telm
});
console.log(dataLayer);
};
});
*WHERE: telm = target element; delm = desired element.
To clarify. I am specifying anchor for a reason, it is not simply for the example. As I am restricted by our CMS, I can't go in and add markup to pre-defined code (i.e. template), but I do need to know what link was clicked as exactly as possible (for Google Analytics), so that I can track down what users are ignoring, not seeing, or prefering.

You can navigate up the hierarchy until you reach the anchor element, then just read its ID.
See here:
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var el = event.target;
while (el.parentElement && el.tagName != 'A') {
el = el.parentElement;
}
dataLayer.push({
'youClicked': el
});
console.log(dataLayer);
alert(el.id);
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>Click Me</p>
</span>
</span>
</span>
</a>
</div>
</div>

What you're trying to achieve, is probably something like this :
var dataLayer = [];
document.addEventListener('click', function(event) {
var needle = 'anchor_class_A'; // The class of the element you're looking for
var closest = event.target.closest("." + needle);
if(closest && closest.id) {
dataLayer.push({
'youClicked': closest.id
});
alert(JSON.stringify(dataLayer, null, '\t'));
}
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
<div class="div_class_A">
<a href="#" id="anchor_id_X" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_Y">
<span id="span_id_Z" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>

Jquery hovercard

I'm using http://designwithpc.com/Plugins/Hovercard , but I can't find out how to declare a var on hovercard. Every job-desc has his own ID and it should be call when hovering labels. I hope I explained well.
<li id="577" class="item">
<span>
<h3 class="padding-left"><label class="labeldesc" for="">Text</label></h3>
</span>
<span class="job-descr" id="hiden-577">TextTextTextTextText</span>
</li>
<li id="588" class="item">
<span>
<h3 class="padding-left"><label class="labeldesc" for="">Text2</label></h3>
</span>
<span class="job-descr" id="hiden-588">Text2Text2Text2Text2Text</span>
</li>
Jquery code:
$('.labeldesc').hovercard({
var idhover=$(this).closest('.item').attr('id');
detailsHTML:$("#hiden-" + idhover).html()
});

Give this a shot: http://jsfiddle.net/X2q9z/
$('.labeldesc').hovercard({
onHoverIn: function() {
var txt = $($(this).parents('li')[0]).find('.job-descr').html();
$(this).find('.hover_text').html(txt);
},
detailsHTML: '<div class="hover_text"></div>'
});

First of all your jQuery Code has issue. You cannot use var inside calling hovercard function.
I update it as you wanted. Please take a loot at this: http://jsfiddle.net/cnCmN/
$('.labeldesc').each(function(){
$(this).hovercard({
detailsHTML: $("#hiden-"+$(this).closest('.item').attr('id')).html()
});
});