ansaurus

Question

Can I set a value in the onclick function?

Answer 1

A:

Sure, why don't you take it for a test-drive :)

Both examples should work - except you need to put the actual javascript function in a <javascript> block.

Per Hornshøj-Schierbeck 2009-08-26 06:14:35

a <javascript> block???

Darko Z 2009-08-26 06:19:43

A <javascript> block??? =(|)

Randell 2009-08-26 06:24:08

A `<javascript>` BLOCK???

deceze 2009-08-26 06:31:07

a...BLOCK?!?! of <javascript>?

Maurice 2009-08-26 06:48:33

A <javascript> OF BLOCK!

August Lilleaas 2009-08-26 06:49:36

How do I shot <javascript>?

Ryan Bigg 2009-08-26 07:00:09

I'm sure he meant a block of `<script type="text/javascript">`, but I agree, he should't write it like that. Luckily there are other answers here that are good...

awe 2009-08-26 07:22:44

Answer 2

A:

It's possible, but it's not a good idea.

Scattering code in inline events leads to a convoluted and difficult-to-follow code.

SLaks 2009-08-26 06:15:27

Answer 3

A:

Yes you can set flag in onclick(but this flag should be global)

<script>var flag=null;</script>
<a id='ctr' href='#' onclick='flag=1'> Hello </a>

and yes you can define function inline.

<a id='ctr' href='#' onclick='function call_this(){flag=1;};call_this();'> Hello </a>

But i must warn you that this is not right design. Better to have all javascript in js files. And set up only handlers.

Eldar Djafarov 2009-08-26 06:15:46

Answer 4

A:

You can have both JS codes in the elements onclick property, but usually that's an ugly solution and you should avoid it. It's better to place all your JS scripts in a separate block or a separate file and call it from there.

RaYell 2009-08-26 06:16:17

Answer 5

+8 A:

Since you have an ID on your anchor element, you can easily find it and bind the event.

If it's a simple action, you can use an anonymous function rather than having to declare a function on the global scope:

window.onload = function () {

  // Bind events...

  document.getElementById('ctr').onclick = function () {
    flag1 = 1;
    return false; // stop the browser from following the link
  };

  // ....
};

Edit: Looking at your edit, the jQuery document.ready event fires when the page load, at this time you flag still have null assigned.

Note that you are only adding the anchor element to the DOM, and then you make an if statement.

Since you use jQuery you can use it to bind the click event to the newly created element:

var flag=null;

$(document).ready(function(){
  $('<a id="ctr" href="#"> Hello </a>').appendTo('#header').click(function () {
    flag = 1; 
    e.preventDefault(); // stop the browser from following the link
  });
});

You can do this since the appendTo function returns the newly created DOM element, and you can bind events directly to it.

CMS 2009-08-26 06:18:46

six answers and only one that knows what they're talking about. +1

Darko Z 2009-08-26 06:22:00

This will cause a problem, however if executed before 'ctr' is fully loaded. You will need to bind a function to the window.onload event, and execute this code within it.

James Wiseman 2009-08-26 06:49:42

@James: agree, edited...

CMS 2009-08-26 06:52:42

I get what I wanted with ur code.. Thanks a lot.. I actually wanted to set a php variable,$selectedId to the id ctr which is also a php variable(id=<?=ctr;?>. The value got saved in the $selectedId variable. But when I try to use it later,to pass it as an element in the url, the last value of the ctr in the for loop is only updated. i.e if ctr={1,2,3,4} and I select 2, the value passed in the url is 4. Why? Can u help me out with this?

2009-08-26 12:16:22

Answer 6

+1 A:

Yes and yes.

To test #1, I added an alert like this:

<a id='ctr' href='#' onclick='flag=1; alert(flag);'>Hello</a>

To test number #2, I added an alert as well:

<a id='ctr' href='#' onclick='function call_this() { flag=1; alert(flag); } call_this();'>Hello</a>

Randell 2009-08-26 06:19:37

Answer 7

+2 A:

Yes, with little adjustment it should work. But you should know that the best practice for using javascript is have ALL your javascript in an external file. This keeps your html "clean", makes editing easier, and gives you a better overview of what's happening.

contents of the file my.html:

<html>
    <head>
        <title>hello :-)</title>
        <script language="javascript" src="my.js" type="text/javascript"></script>
    </head>
<body>
    <a href="#" id="ctr">Set var value</a><br />
    <a href="#" id="check">Check var value</a>
</body>
</html>

Contents of the file my.js:

var flag = 0;

function init()
{
    var ctr_element = document.getElementById('ctr');
    ctr_element.onclick = function()
    {
        flag = 1;
        return false;
    }

    var check_element = document.getElementById('check');
    check_element.onclick = function()
    {
        alert(flag);
        return false;
    }
}

window.onload = init;

PS. Even better practice would be the use of a class, so you have less risk of accidentally overwriting your variables. (especially when also using 3rd part libraries etc). But I recommend you leave that for another day, when your confident enough about your skills.

If you're interested in writing as crossbrowser compatible code, you might want to take a look at libraries like prototype, jquery or dojo. (there are more) They make your js life so much easier :-)

Maurice 2009-08-26 06:42:05

ansaurus

tags:

views:

answers:

Can I set a value in the onclick function?

related questions