如何在點擊時切換元素的innerHTML

Question

如何在點擊時使用純JS切換元素的innerHTML？

(function(){ 
    var div = document.getElementById("hook"); 

    div.addEventListener("click", function(){ 
     div.innerHTML = "I've been clicked"; 
    }, false); 
})(); 

http://jsfiddle.net/Z2UBs/1/

Answer 1

最簡單的方式（向你展示這背後的想法）：

(function(){ 
     var div = document.getElementById("hook"); 

     div.addEventListener("click", function(){ 

      var state1 = document.getElementById('t1').value; 
      var state2 = document.getElementById('t2').value; 

      if (div.innerHTML == state1) { 
       div.innerHTML = state2; 
      } 
      else if (div.innerHTML == state2) { 
       div.innerHTML = state1; 
      } 
      // add as many dynamic values as you wish here 
      else { 
       // to be on the safe side 
       div.innerHTML = state1; 
      } 
     }, false); 

    })(); 

FIDDLE

如果你希望它是更有效的再介紹布爾變量代表目前的狀態。

Answer 2

試試這個

(function(){ 
      var div = document.getElementById("hook"); 
      var curText = div.innerText; 
      div.addEventListener("click", function(){ 
      if(this.innerText == curText){ 
       div.innerText = "I've been clicked"; 
      } 
      else{ 
        div.innerText = curText; 
      } 
      }, false); 

     })(); 

這裏是jsfiddle