0

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:

  1. "( 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.

  1. "( 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.

  1. "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!

Community
  • 1
  • 1
8protons
  • 3,591
  • 5
  • 32
  • 67
  • Why the down vote? I'd appreciate knowing what's wrong with my question, thank you. – 8protons Mar 07 '16 at 19:36
  • even better: use modern event handling. Not 1998 deprecated event handling. In your JS, use `var thing = document.querySelector('...')` to get the element that needs a click handler, then give it one with `thing.addEventListener("click", function(evt) { ... });` – Mike 'Pomax' Kamermans Mar 07 '16 at 19:37
  • It'll work if you fix the syntax errors and define the function before you use it. https://jsfiddle.net/b7yj3cph/4/ And yes, your jsfiddle is wrapped in onload (click on the JavaScript gear button). – JJJ Mar 07 '16 at 19:37
  • 1
    This is the right way to do it if you are using vanilla javascript : https://jsfiddle.net/DinoMyte/b7yj3cph/6/. Your other posted example uses jquery which different syntax and implementation. – DinoMyte Mar 07 '16 at 19:38

2 Answers2

2

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;
Jonathan Crowe
  • 5,793
  • 1
  • 18
  • 28
1

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.

vcanales
  • 1,818
  • 16
  • 20