CODEWITHSUNDEEP
javascriptjqueryonclick
George
George

Reputation:

Can I set a value in the onclick function?

I have a link and on clicking the link I want to set the value of a flag variable to 1. Is that possible? Like 

<a id='ctr' href='#' onclick='flag=1'> Hello </a>

And also how to write the function for the onclick event on the same line, like instead of

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

can I have the call_this function in the onclick line itself?

EDIT2

Now I have the code like this. Inside the onclick event, the value is stored in the $selectedId correctly. But When I try to pass that value in the url, I do not get the correct value. The last value in the for loop is passed.

 <script type="text/javascript">

 $(document).ready(function(){

 <?php foreach ($Forms as $r): ?>

     $("<a id='<?php echo $ctr['Form']['id'];?> href='#' onclick='flag=1'> Hello </a>").appendTo("#header").click(function(){
     <?php $selectedId=$r['Form']['id'];?>
     alert("selId: "+<?php echo $selectedId;?>);//here the selected value is echoed
 });
 </script>

 <a href="http://localhost/Example/new/export?height=220&width=350&id=<?php echo $selectedId;?>" class="thickbox button" title= "Export" >Export</a>

here the id is passed as 4,which is the last value in the php for loop.

Upvotes: 1

Views: 18706

Answers (6)

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 828200

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.

Upvotes: 8

Maurice
Maurice

Reputation: 4940

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 :-)

Upvotes: 2

Randell
Randell

Reputation: 6170

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>

Upvotes: 1

RaYell
RaYell

Reputation: 70494

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.

Upvotes: 0

Eldar Djafarov
Eldar Djafarov

Reputation: 24725

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.

Upvotes: 0

SLaks
SLaks

Reputation: 888303

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

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

Upvotes: 0

Related Questions