Question

我有一个<DIV>，我将其用作按钮，如下所示：

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

我希望在用户点击它后将 onClick 字符串值更改为taskIsDone(1,2,"n")，然后再次点击它时，返回taskIsDone(1,2,"y")，依此类推。

我试图通过 taskIsDone javascript函数完成此操作，例如

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

但它不起作用。

我在网上查看了超过7-8个示例，大多数来自此处（Stackoverflow），但我没有找到我的问题的答案（这基本上是动态改变 onclick 该 DIV ID的字符串。我不想运行一个函数，因为我发现的大部分示例都只是想更改 onclick 字符串值，在 div 按钮上每次点击修改＆＃34; y＆＃34;到＆＃34; n＆＃34;，再次＆＃34; y＆＃34;等等。

谢谢！

Answer 1

请参阅http://jsfiddle.net/wnw0oskd/

您可以将其更改为属性，因为该元素的警告显示onlick不是＆＃39; taskIsDone（1,2，＆＃34; y＆＃34;）;＆＃39;但是一个功能。

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

Answer 2

如果您打印document.getElementById('your_div').onclick的当前值，您会发现它不是字符串taskIsDone(1,2,"y");，但它是：

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

因此，如果您想更改.onclick的值，请为其指定一个此类函数。

示例（在.onclick和a()之间切换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>

Answer 3

试试这个。

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

          }

      }

Answer 4

专门回答你的问题，尝试将“onlick”设置为函数而不是字符串：

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

尽管如此，有更好的办法做这种事情。例如，您可以将您的状态保存在附加到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>

请参阅http://www.w3schools.com/tags/att_global_data.asp

javascript：更改<div> onclick值

4 个答案: