javascript : changing
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!!

score 1 · Accepted Answer · answered Jun 06 '15 at 13:37

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'");"

score 0 · Answer 2 · answered Jun 06 '15 at 13:29

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>

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! — Adrian Tanase, Jun 06 '15 at 18:54

Navneeth · Answer 3 · 2015-06-06T13:42:44.540

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 06 '15 at 13:42

answered Jun 06 '15 at 13:32

Navneeth

988
3
11
29

score 0 · Answer 4 · answered Jun 06 '15 at 13:33

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

javascript : changing onclick value

4 Answers4

javascript : changing
onclick value