Change the OnClick event using Javascript

Question

I have an HTML anchor tag like

<a href="anchorid" onclick="callEvent(1)">

Here I call the Javascript function like

<script>
function callEvent(anchor) {
    alert("Anchor ID is - "+anchor);
    document.getElementById("anchorid").onClick = function () { callEvent(0) }; // BY using this code, update the onclick callEvent(0), like toggle
}
</script>

I wants to update the anchor tag like

<a href="anchorid" onclick="callEvent(0)">

When using this code, it is not updating as per my requirement.

 document.getElementById("anchorid").onClick = function () { callEvent(0) };

How do I get it to update?

PHP tag wasn't necessary here, i've removed it.

STT LCU
– STT LCU

2013-09-12 08:59:27 +00:00
Commented Sep 12, 2013 at 8:59 — STT LCU
– STT LCU, Commented Sep 12, 2013 at 8:59

Sudhir Bastakoti · Accepted Answer · 2013-09-12 09:06:52Z

2

for using document.getElementById("anchorid").. you need to have id in your element, which you currently dont have, try doing:

//add id to your anchor
<a href="javascript:void(0);" id="anchorid" onclick="return callEvent(1);">
    test
</a>

and js

<script type="text/javascript">
function callEvent(num) {
    alert("Anchor ID is - "+num);
    document.getElementById('anchorid').onclick = function () { callEvent(0) }; 
}
</script>

answered Sep 12, 2013 at 9:06

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

Comments

Akshay · Accepted Answer · 2013-09-12 09:26:08Z

1

Store the toggle value in tag itself and then use.

<script>
function callEvent(val) {
    var val = document.getElementById("myId").getAttribute('data-val');
    alert(val);
    // toggle value
    val = val==1?0:1;
    document.getElementById("myId").setAttribute('data-val',val);
}
</script>
<a id="myId" data-val="0" onClick="callEvent()">Click</a>

here value is stored in data-val value so that is toggled in the callEvent function itself, so no need to rebind the event.

See Example fiddle

answered Sep 12, 2013 at 9:26

Akshay

3,8944 gold badges50 silver badges86 bronze badges

Comments

karaxuna · Accepted Answer · 2013-09-12 08:56:57Z

0

try:

document.getElementById("anchorid").onclick

Better:

document.getElementById("anchorid").addEvenetListener('click', function(){

});

answered Sep 12, 2013 at 8:56

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

2 Comments

user2688251 Over a year ago

I am getting an error like this.. Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'addEvenetListener'

karaxuna Over a year ago

@user2688251 what browser are you using?

Dardino · Accepted Answer · 2013-09-12 09:00:32Z

0

Tested: http://jsfiddle.net/Yca5W/

document.getElementById("anchorid").onclick =
    function () {
        alert("clicked");
    };

answered Sep 12, 2013 at 9:00

Dardino

1831 silver badge8 bronze badges

Comments

Dexa · Accepted Answer · 2013-09-12 09:14:16Z

0

if you only change parameter of calling function then you dont have to change complete event. You can do it like this:

HTML

<a id="anchorid" href="#">click me !</a>

JS

<script>
var anchor = 1;

document.getElementById("anchorid").onclick = function(){
    alert("Anchor ID is: " + anchor);
    anchor = anchor == 1 ? 0 : 1; //toggle 0 and 1
}
<script>

answered Sep 12, 2013 at 9:14

Dexa

1,65110 silver badges25 bronze badges

Comments

ratnesh dwivedi · Accepted Answer · 2013-09-12 09:23:10Z

0

try This:

var anchor= document.getElementById('anchorid');
  anchor.addEventListener('click', function() {
        callEvent(0);
    });

OR

$( "#anchorid" ).click(function() {
 callEvent(0);
});

if you only want changes passing parameter from 1 to 0 or vice verse then do this one:

 <input type="hidden" name="para" id="para" value="1" > 
    <a href="anchorid" onclick="callEvent($('#para').val())">



 $( "#anchorid" ).click(function() {
      if ($('#para').val()==1) {
        $('#para').val(0)
      } else {
        $('#para').val(1)
      }
    });

edited Sep 12, 2013 at 9:23

answered Sep 12, 2013 at 9:02

ratnesh dwivedi

3522 silver badges8 bronze badges

Comments

Voonic · Accepted Answer · 2013-09-12 09:25:01Z

0

try this, it may solve your problem demo Fiddle

Add id="anchorid" to your anchor tag

When you click it next time it will callEvent by argument 0,

function callEvent(anchor) {
    alert("Anchor ID is - "+anchor);
    var ele =  document.getElementById("anchorid");
    ele.setAttribute("onclick","callEvent(0)");

}

It will update your link like you wanted

<a href="anchorid" id="anchorid" onclick="callEvent(0)">

edited Sep 12, 2013 at 9:25

answered Sep 12, 2013 at 9:19

Voonic

4,7753 gold badges29 silver badges60 bronze badges

Collectives™ on Stack Overflow

Change the OnClick event using Javascript

7 Answers 7

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related