Develop Reference

How to select elements by class name in hammer.js?

I'm trying to use hammer.js and select elements using their class name as opposed to thier IDs.
However, my code seems to only selects the first element with the class name and ignores the rest with the same class name.
It doesn't also get the $(this).attr('id); for some reason!
Here is a working fiddle:
jsfiddle.net/cku6xap9/
If you swipe left on the first element, you see an undefined alert but nothing happens when you swipe left on other elements.
Can someone please advice on this issue?
Thanks in advance.

You have some errors:
document.querySelector selects only one element. Use document.querySelectorAll instead
You are declaring hammer globally instead of using one instance for each element
In $(this).attr('id');, this is the context of hammer, not the HTML element
Try this:
$('.box').each(function(){
var mc = new Hammer(this);
mc.on("swipeleft", function(e) {
var id = e.target.id;
alert(id)
});
});

How do I display a unique id value with GTM?

I have multiple elements on a page with the same class name, but each element has a unique id name.
Example:
<div class="video-image" id="get-googled">
<div class="video-image" id="email-marketing">
I want to display the id value, but right now I am only able to have GTM return and display the first element on the page. I read this post: "Getting value of ID from class" and it didn't help and even explains doing it the simple way will only display the first elements value.
Do I need custom Javascript to create this properly?

If you want to get a specific div and you know where it is on the page you might be able to use a DOM variable with an nth of type query selector. But this seems cumbersome, and since it seems you want a list in any case I think you are better of with a custom javascript variable:
function() {
return document.querySelectorAll(".video-image");
}
which return a collection of DOM elements (you might want to check if there are actually elements with that class first).

The initial answer is the right start - this completes the loop:
<script>
var inputs = document.querySelectorAll(".video-image");
for (var i = 0; i < inputs.length; i++) {
alert(inputs[i].id);
}
</script>
Here is a JSFiddle to try it out - [https://jsfiddle.net/JMurphy22/kduybmsp/2/][1]

innerHTML isn't working with getElementsByClassName

I'm just a beginner. And I'm trying to use innerHTML.
I think I wrote proper code, but it doesn't work.
When I click the trigger, the page becomes white and showing the statut : 'connecting'
I don't know where is the problem
Please someone help me.
Here are my codes.
HTML CODE
<div class = "head">
<nav>
<a onClick="open()">
<div class = "body">
<div class = "bodyL">
<div class = "newsPnT">
JAVASCRIPT CODE
function open() {
document.getElementsByClassName('newsPnT').innerHTML = "asdfasdfasdf";
}
What is the problem with my code?
PS: I'm using Firefox Aurora. When I click the trigger, the 'debugger > sources' says, 'waiting for sources.'

getElementsByClassName() returns array with elements.
Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.
So you need iterate array and set innerHTML like this i.e.
var elements = document.getElementsByClassName('myClass');
Array.prototype.forEach.call(elements, function(element) {
element.innerHTML = 'Your text goes here';
});
Also a little bonus JSFiddle

the className 'open' seemed to the keyword of javascript.
I changed the className from 'open' to 'openThis'and that came to be a solution of the problem.

jQuery - iterate through all elements with class and change their style

I know this is supposed to be simple, but I'm running into multiple problems. First of all, I don't know how to get all elements of a class and change their display. I found the .each method with this sample code:
$('.classname').each(function(index) {
alert(index);
});
What do I need instead of the alert to change the display property of an element from 'none' to block'?
The second problem is, the class name is gathered from a hidden field. Let's name this variable service. When I try to replace the '.classname' with '.'+service I get an error saying 'Syntax error, unrecognized expression: .'.
So the actual code would be something like:
var service=$('#service').val();
$('.'+service).each(function(index) {
alert(index);
});
I'm sure this can't be complicated but I can't figure it out.
Any alternative solution is of course welcome.

Check out .show:
var service=$('#service').val();
$('.'+service).show(); // roughly equivalent to .css('display', 'block');
However, as the documentation for show points out, the method returns the matched elements display property to it's previous state. To explicitly change the display style property to block, use .css:
$('.' + service).css("display", "block");

try fadeIn() and fadeOut()
var service=$("#service").val();
$("."+service).fadeIn();

javascript get child by id

<div onclick="test(this)">
Test
<div id="child">child</div>
</div>
I want to change the style of the child div when the parent div is clicked. How do I reference it? I would like to be able to reference it by ID as the the html in the parent div could change and the child won't be the first child etc.
function test(el){
el.childNode["child"].style.display = "none";
}
Something like that, where I can reference the child node by id and set the style of it.
Thanks.
EDIT: Point taken with IDs needing to be unique. So let me revise my question a little. I would hate to have to create unique IDs for every element that gets added to the page. The parent div is added dynamically. (sort of like a page notes system). And then there is this child div. I would like to be able to do something like this: el.getElementsByName("options").item(0).style.display = "block";
If I replace el with document, it works fine, but it doesn't to every "options" child div on the page. Whereas, I want to be able to click the parent div, and have the child div do something (like go away for example).
If I have to dynamically create a million (exaggerated) div IDs, I will, but I would rather not. Any ideas?

In modern browsers (IE8, Firefox, Chrome, Opera, Safari) you can use querySelector():
function test(el){
el.querySelector("#child").style.display = "none";
}
For older browsers (<=IE7), you would have to use some sort of library, such as Sizzle or a framework, such as jQuery, to work with selectors.
As mentioned, IDs are supposed to be unique within a document, so it's easiest to just use document.getElementById("child").

This works well:
function test(el){
el.childNodes.item("child").style.display = "none";
}
If the argument of item() function is an integer, the function will treat it as an index. If the argument is a string, then the function searches for name or ID of element.

If the child is always going to be a specific tag then you could do it like this
function test(el)
{
var children = el.getElementsByTagName('div');// any tag could be used here..
for(var i = 0; i< children.length;i++)
{
if (children[i].getAttribute('id') == 'child') // any attribute could be used here
{
// do what ever you want with the element..
// children[i] holds the element at the moment..
}
}
}

document.getElementById('child') should return you the correct element - remember that id's need to be unique across a document to make it valid anyway.
edit : see this page - ids MUST be unique.
edit edit : alternate way to solve the problem :
<div onclick="test('child1')">
Test
<div id="child1">child</div>
</div>
then you just need the test() function to look up the element by id that you passed in.

If you want to find specific child DOM element use method querySelectorAll
var $form = document.getElementById("contactFrm");
in $form variable we can search which child element we want :)
For more details about how to use querySelectorAll check this page