Develop Reference

How do I simulate a click on a div with javascript

I am looking for a way to be able to rig a shortcut to a youtube controll button. I want to be able to click on the left and right arrow to activate "Previous video" and "Next video" on a playlist. I used to be easily able to do it myself, but they made some changes and since those I can't quite replicate what i used to have working.
I use the Google Chrome Shortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "https://www.youtube.com*"
The problem reside in the script to execute. I used to simply do a document.getElementById but now they use class instead of id and I cant get it to work. Their buttons are divs and they go like this:
<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">
My code actualy comes from another Stackoverflow Question
Still, if I put all of that together to make the folowing code it doesn't work.
simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");

getElementsByClassName returns an array, since you can have multiple elements with the same class name. You can pick them by document.getElementsByClassName("ytp-button ytp-button-prev")[index]

jQuery is not the best solution for all our projects, but for simulate events it's not bad option
(function($){
$('.element').click();
// same for others ex: $('.element').keyup();
})(jQuery);
example: http://jsfiddle.net/h0po3q3w/

If you are using jQuery, you can target the element then trigger a click event like this:
$( ".ytp-button-prev" ).trigger( "click" );

Jason has your answer, but an alternative is to use document.querySelector. If there is only one button with those classes, or you want the first one, then:
var button = document.querySelector('.ytp-button.ytp-button-prev');

<img> in <a> crashes app (Javascript Windows 8 app)

Basically what the title says. I have an anchor tag <a> hooked up with the PageControl, following the tutorial. I set the anchor tag to display:block and then added an <img> inside the <a>.
However, clicking the <img> will cause the app to crash. If I click the area around the <img> (but inside the <a>), the link works. It's just the <img> that's weird.
I tried Googling the issue but couldn't find a solution. If this has been asked before, a link would be extremely helpful.
EDIT: Here's the offending code:
<a id="MainGrid" href="/pages/flow/flow.html">
<img src="/images/Documents.png" />
<br />
New Round
</a>

I'm going to go out on a limb here and check to see if you are closing your img tag properly. I've run into really random problems in html when i forgot the add a '/'
Your code should like something like this:
<a href="http://www.tutorialspoint.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>

So, I figured out the problem and I'm posting it here for future reference.
The tutorial asks us to add this function:
linkClickEventHandler: function (eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href, { isReal: false });
}
Apparently, the problem is the variable link is targeting the image, instead of the actual anchor tag. I just added some logic that checks if link is an anchor tag (and if not, I set link = link.parentElement; and everything works now.
Thanks to everyone who actually bothered to take the time and tried to help!

Why wont my appendChild work?

I have a little javascript app set up here: http://jsfiddle.net/faYMH/
What i want it to do is add a
<div><h1>Hi there and greetings!</h1></div>
after
<div id='org_div1' onclick="addElement()">Hello</div>
using
<a href="#" onClick="addElement()" >add some</a>
(actually, what i want is for the onClick to go directly in the
So can anyone correct my code or provide some input?
(My next step is to also add a remove div, add an id to the new div with id + i++ )
Thanks so much!!

That's a quirk of JSFiddle. It wraps all of your code in a closure, so onclick handlers can't access your function. Either export the function into the global scope:
window.addElement=addElement;
Or change the little drop down in JSFiddle from "onLoad" to "no wrap (head)" or "no wrap (body)". While you're at it, you might want to change "Mootools" to "No-Library (pure JS)".

In your jsFiddle, addElement was scoped to inside the document ready handler and thus wasn't available to the click handler. I've modified the settings in the jsFiddle (without changing any code) to not have your code wrapped that way and it works for me now: http://jsfiddle.net/jfriend00/XVDYa/.
I changed the jsFiddle settings to "No-Library (pure JS)" and to "no wrap (head)". It's the second setting that really makes the difference here.

javascript:void(0) or onclick="return false" for <a> - which is better?

There is a javascript-based interface - so I need not to support work without javascript.
I have an
<a>Something</a>
elements with JS code, which binds on click event - so, I don't want page reload after user's click.
Which way is better?
1. Something
2. Something
What advantages and disadvantages of each method?

Both are poor choices. Presentation shouldn't mix with content. That means no javascript: URIs, and definitely no onclick attributes.
The way to do it:
<a id="myLink">Something</a>
<script>
function myFunction(...) { ... }
document.getElementById('myLink').addEventListener('click', myFunction, false);
</script>

Neither. If your link doesn't go anywhere, don't use an <a> element. Use a <span> or something else appropriate and add CSS to style it as you wish.

Unobtrusive Javascript: Removing links if Javascript is enabled

I'm using PopBox for magnifying thumbnails on my page.
But I want my website to work even for users which turned javascript off.
I tried to use the following HTML code:
<a href="image.jpg">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/>
</a>
Now i need to disable the a-Tag using javascript, otherwise my PopBox won't work.
How do I do that?

Just put the onclick on the a-tag:
<img ...>
Make sure to return false either at the end of the function (here Pop) or inline like in the above example. This prevents the user from being redirected to the link by the <a>'s default behaviour.

Put the onclick event onto the link itself, and return false from the handler if you don't want the default behavior to be executed (the link to be followed)

You could give all your fallback anchor tags a particular classname, like "simple"
Using prototype, you can get an array of all tags using that class using a CSS selector, e.g.
var anchors=$$('a.simple')
Now you can iterate over that array and clear the href attributes, or install an onclick handler to override the normal behaviour, etc...
(Edited to add that the other methods listed above are much simpler, this just came from a background of doing lots of unobtrusive javascript, where your JS kicks in and goes and augments a functioning HTML page with extra stuff!)

May I suggest, in my opinion, the best solution? This is using jQuery 1.4+.
Here you have a container with all your photos. Notice the added classes.
<div id="photo-container">
<a href="image1.jpg">
<img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" />
</a>
<a href="image2.jpg">
<img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" />
</a>
<a href="image3.jpg">
<img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/>
</a>
</div>
An then you make a single event handler this way:
<script type="text/javascript">
$(document).ready(function(){
var container = $('#photo-container');
// let's bind our event handler
container.bind('click', function(event){
// thus we find (if any) the image the user has clicked on
var target = $(event.target).closest('img.popup-image');
// If the user has not hit any image, we do not handle the click
if (!target.length) return;
event.preventDefault(); // instead of return false;
// And here you can do what you want to your image
// which you can get from target
Pop(target.get(0));
});
});
</script>

The href attribute is not required for anchors (<a> tags), so get rid of it...
<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a>
<script type="text/javascript">
document.getElementById("apic001").removeAttribute("href");
</script>
This method will avoid library contention for onclick.
Tested in IE6/FF3/Chrome. Side benefit: You can link directly to the portion of the page containing that thumbnail, using the id as a URI fragment: http://whatever/gallery.html#apic001.
For maximum browser compatibility, add a name="apic001" attribute to the anchor tag in your markup ('name' and 'id' values must be identical).
Using jQuery, dojo, Prototype, etc. you should be able to do the removeAttribute on multiple, similar anchors without needing the id.

You should be able to mix and match the return false from Chris's idea with your own code:
<a href="image.jpg" onclick="return false;">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);">
</a>
If someone has Javascript disabled, then their browser ignores the onclick statement in both elements and follows the link; if they have Javascript enabled, then their browser follows both OnClick statements -- the first one tells them not to follow the <a> link. ^_^