Sending variable to a function through javascript

Question

i'm trying to send a variable through to a function when clicking an image, but can't get any of it to work. not sure where I am going wrong.?

jsfiddle http://jsfiddle.net/cibravo/rNGMR/

HTML

<input type="submit" value="send" onclick="alert('works')" />
<br/><br/>

<img onclick="alert('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />

<br/><br/>
<!-- this doesn't work -->
<input type="button" value="send" onclick="myFunction()" />
<br/><br/>
<!-- this doesn't work -->
<img onclick="showhide('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />

JS

function myFunction(){
    alert("works");
}

function showhide(field){
    alert(field);
}

Please read jsFiddle's documentation: doc.jsfiddle.net/basic/… and learn how to debug JavaScript. — Felix Kling
– Felix Kling, Commented Aug 5, 2013 at 7:57

T.J. Crowder · Accepted Answer · 2013-08-05 08:00:06Z

1

Both of your examples that you say don't work will work provided the functions they call are globals, not contained within any scoping function.

The reason it's not working in your fiddle is that jsFiddle's (surprising) default is to wrap your JavaScript code in a window load event handler, like this:

window.onload = function() {
    // your code here
};

...so your functions aren't globals. (I say it's surprising because waiting until the window load event runs, which is very late in the page load process, is not best practice.)

Here's an updated fiddle: http://jsfiddle.net/rNGMR/4/ As Juhana points out, you change tehs second drop-down box on the upper left to one of the "no wrap" options (I went with "no wrap - body").

For clarity, here's a complete all-in-one example: Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Global Functions</title>
</head>
<body>
<input type="submit" value="send" onclick="alert('works')" />
<br/><br/>

<img onclick="alert('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />

<br/><br/>
<!-- this doesn't work -->
<input type="button" value="send" onclick="myFunction()" />
<br/><br/>
<!-- this doesn't work -->
<img onclick="showhide('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />
<script>
// Note that these are globals
function myFunction(){
    alert("works");
}

function showhide(field){
    alert(field);
}
</script>
</body>
</html>

edited Aug 5, 2013 at 8:00

answered Aug 5, 2013 at 7:53

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JJJ Over a year ago

In other words, pick either of the "no wrap" options from the second dropdown menu on the top left. jsfiddle.net/rNGMR/1

Paulo Tomé · Accepted Answer · 2013-08-05 08:38:27Z

More or less an alternity to your current approach (which was solved while I wrote this.)

Please try avoid using the 'onclick' event when you work on bigger projects. It's usually better to keep HTML, CSS und JavaScript modularly separated.

When I encounter problems like this I usually use anonymous functions, who then call the function with the right parameters.

This technique also solves the problem that everything needs to be global -- which is discouraged too.

It suited me well trough the last 3 years and around 15k lines of JavaScript code.

Here is an example: http://jsfiddle.net/8jSaT/1/

<!-- HTML -->
<img id="btnSomething" src="http://firmakurser.studieskolen.dk/...">

// (plain) Javascript 
var btn = document.getElementById('btnSomething');

// this is where the anonymous function comes in:
// Its only purpose is to redirect the onClick-Event
// and serve proper parameters
var btn.onclick = function() { showhide('works'); };

// Your code
////////////////
function myFunction(){
  alert("works");
}

function showhide(field){
  alert(field);
}

Collectives™ on Stack Overflow

Sending variable to a function through javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related