javascript 点击改变div 名

这段JS 点击改变DIV名,如何实现,点击改变再点击改变,循环, 
<!DOCTYPE html>
<html>
<head>
<style>
.c1{background:red;}
.c2{ background:blue;}
</style>
</head>
<body>
<script>
function changeclass(){
  var divEle= document.getElementById('diva');
  divEle.className='c2'; 
}
</script>
<div id='diva' class='c1'>111</div>
<input type='button' onclick='changeclass()' value='改变名字'/>
</body>
</html>

使用三元表达式控制className,修改函数如下:

function changeclass(){
    var divEle= document.getElementById('diva');
    divEle.className=(divEle.className=='c1'?'c2':'c1'); 
}

不是改变名字是改变样式吧?
现在代码的问题是点击触发事件后,函数中始终将className设置为c2,因此不会改变
加上判断,如果当前为c2则改为c1,如果为c1则改为c2

三元表达式不熟悉的话可以写成

<script>
        function changeclass(){
          var divEle= document.getElementById('diva');
          if(divEle.className == 'c2'){
            divEle.className = 'c1'
          }
          else
          {
            divEle.className = 'c2'
          }
        }
    </script>

$(document).ready(function(){
$("button").click(function(){
$('#diva').toggleClass(function(){
return 'c2'
});
});
});

修改script标签

<script>
    var flag = true;
    function changeclass(){
      var divEle= document.getElementById('diva');
      if(flag){
        divEle.className='c2';
        flag = false;
      }else{
        divEle.className='c1';
        flag = true;
      }    
    }
</script>