javascript : changing <DIV> onclick value

Question

I have a <DIV> which I'm using as a button like this :

<div id='project_1_task_2_is_done' 
class='button_style_1_small' onClick='taskIsDone(1,2,"y");'>
Is done?
</div>

I want to change the onClick string value to taskIsDone(1,2,"n") once the user clicks on it, and then, when it clicks again, back to taskIsDone(1,2,"y") and so on.

I'm trying to accomplish this from the taskIsDone javascript function such as

if(is_done=='n'){
    document.getElementById('project_' + project_id + '_task_' + task_id + '_is_done')
.onclick = "taskIsDone(" + project_id + "," + task_id + ",'y');"
}

but it's not working.

I looked over the net to more than 7-8 examples, most from here (Stackoverflow) but I'm not finding the answer to my question (which is basically changing dynamically the onclick string for that DIV id. I don't want to run a function, as most of the examples i found present, just want to change the onclick string value, modifying "y" to "n", and again "y", etc, for each click on the div button.

thanks!!

artm · Accepted Answer · 2015-06-06 13:37:37Z

1

See http://jsfiddle.net/wnw0oskd/

You can change it as an attribute, as the alert shows onlick of the element is not 'taskIsDone(1,2,"y");' but a function.

document.getElementById('project_' + project_id + '_task_' + task_id + '_is_done').setAttribute("onclick", "taskIsDone(" + project_id + "," + task_id + ",'n'");"

answered Jun 6, 2015 at 13:37

artm

8,5943 gold badges28 silver badges43 bronze badges

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

Comments

fferri · Accepted Answer · 2015-06-06 13:29:20Z

0

If you print the current value of document.getElementById('your_div').onclick you realize tht it's not the string taskIsDone(1,2,"y");, but it's:

function (event) {
    taskIsDone(1,2,"y");
}

So, if you want to change the value of .onclick, assign it one such a function.

Example (toggle the value of .onclick between a() and b()):

<html>
    <body>
        <script>
            function a() {
                alert("a()");
                document.getElementById('foo').onclick = function(event) {
                    b();
                }
            }
            function b() {
                alert("b()");
                document.getElementById('foo').onclick = function(event) {
                    a();
                }
            }
        </script>
        <div id="foo" style="position: absolute; left: 20px; top: 20px; width: 200px; height: 50px; background-color: red;" onclick="a();">
        </div>
    </body>
</html>

answered Jun 6, 2015 at 13:29

fferri

19k8 gold badges57 silver badges110 bronze badges

1 Comment

Adrian Tanase Over a year ago

thanks for kindly coding for me...i'm using the simplest answer here, but i'm sure all contributors have great answers, and also other people can learn some more from these examples as well. cheers!

Richard Hundt · Accepted Answer · 2015-06-06 13:33:54Z

to answer your question specifically, try setting "onlick" to a function instead of a string:

if (is_done=='n'){
  var elmt = document.getElementById(...); // arguments omitted for brevity
  elmt.onclick = function(project_id, task_id) {
    taskIsDone(project_id, task_id, 'y');
  }
}

Having said that, though, there are better ways of doing this sort of thing. You could, for instance keep your state in a data attribute attached to the div:

<div id='project_1_task_2_is_done' data-done="no"
   class='button_style_1_small' onClick='toggleDone(ev, 1, 2)'>
   Is done?
</div>
<script type="text/javascript">
function toggleDone(ev, projectId, taskId) {
   var elmt = ev.target
   elmt.dataset.done = elmt.dataset.done == "yes" ? "no" : "yes"
}
</script>

See http://www.w3schools.com/tags/att_global_data.asp

Navneeth · Accepted Answer · 2015-06-06 13:42:44Z

0

Try this.

<div id='project_1_task_2_is_done' 
class='button_style_1_small' >
Is done?
</div>

 var check=false;
var button = document.getElementsByClassName('button_style_1_small');
button.click =function(){
      if(check==false){
            check=true;
            taskIsDone(1,2,"n");
        }else{
          check=false;
          taskIsDone(1,2,"y");

          }

      }

edited Jun 6, 2015 at 13:42

answered Jun 6, 2015 at 13:32

Navneeth

9883 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

javascript : changing <DIV> onclick value

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related