CODEWITHSUNDEEP
javascript
Adrian Tanase
Adrian Tanase

Reputation: 700

javascript : changing <DIV> onclick value

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!!

Upvotes: 0

Views: 141

Answers (4)

Navneeth
Navneeth

Reputation: 988

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

          }

      }

Upvotes: 0

artm
artm

Reputation: 8584

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

Upvotes: 1

Richard Hundt
Richard Hundt

Reputation: 21

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

Upvotes: 0

fferri
fferri

Reputation: 18940

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>

Upvotes: 0

Related Questions