如何在javascript中更改onclick屬性？

Question

我有顯示一個按鈕和一個段落的HTML。 當您單擊該段落時，它指示該段落是否被單擊了奇數次或偶數次。 我正在嘗試獲取按鈕來擴展段落，以包括該段落已被單擊的次數的計數，並在再次單擊該按鈕時恢復為原始文本。 由於某些原因，我認為我的按鈕無法與段落正確通信。 這是我的代碼：

 var doClickCount = false;
 var clickCounter = 0 
 function toggleParagraphCounter(event) {
     var clickMeEvenTimes = true;
     doClickCount = true;
     if (doClickCount === true) {
        function clickMe() {  
      var para1 = document.getElementById("para1");
      if (clickMeEvenTimes) {
        clickCounter += 1; 
        para1.style = "color:green";
        para1.innerHTML = "Click this paragraph." +
        " It has been clicked an odd number of times.\
        Clicked" + clickCounter + "times with counting enabled." ;
      }
      else {  
        clickCounter += 1;
        para1.style = "font-size:0.9em";
        para1.innerHTML = "Click this paragraph." +
        " It has been clicked an even number of times.\
        Clicked" + clickCounter + "times with counting enabled.";
      }    
      clickMeEvenTimes = !clickMeEvenTimes;
  }
 }  else {
    function clickMe() {  
      var para1 = document.getElementById("para1");
      if (clickMeEvenTimes) {       
        para1.style = "color:green";
        para1.innerHTML = "Click this paragraph." +
        " It has been clicked an odd number of times.";
      }
      else {     
        para1.style = "font-size:0.9em";
        para1.innerHTML = "Click this paragraph." +
        " It has been clicked an even number of times.";
      }    
      clickMeEvenTimes = !clickMeEvenTimes;
  }
 }

 }

我還能做些什么來解決這個問題？

Answer 1

您已兩次聲明clickMe函數，下面已重新格式化您的代碼。

 var doClickCount = false;
 var clickCounter = 0 
 function toggleParagraphCounter(event) {

 var clickMeEvenTimes = true;
 doClickCount = true;

 if (doClickCount === true) {

 }  else {

 }
}
function clickMe() {  
  var para1 = document.getElementById("para1");
  if (clickMeEvenTimes) {       
    para1.style = "color:green";
    para1.innerHTML = "Click this paragraph." +
    " It has been clicked an odd number of times.";
  }
  else {     
    para1.style = "font-size:0.9em";
    para1.innerHTML = "Click this paragraph." +
    " It has been clicked an even number of times.";
  }    
  clickMeEvenTimes = !clickMeEvenTimes;
}
function clickMe() {  
  var para1 = document.getElementById("para1");
  if (clickMeEvenTimes) {
    clickCounter += 1; 
    para1.style = "color:green";
    para1.innerHTML = "Click this paragraph." +
    " It has been clicked an odd number of times.\
    Clicked" + clickCounter + "times with counting enabled." ;
  }
  else {  
    clickCounter += 1;
    para1.style = "font-size:0.9em";
    para1.innerHTML = "Click this paragraph." +
    " It has been clicked an even number of times.\
    Clicked" + clickCounter + "times with counting enabled.";
  }    
  clickMeEvenTimes = !clickMeEvenTimes;

}

Answer 2

嘿，這是起作用的代碼：

 var doClickCount = false;
 var clickCounter = 0 

 function countPar1 () { 
      var para1 = document.getElementById("para1");
      if (clickMeEvenTimes) {
        clickCounter += 1; 
        para1.style = "color:green";
        para1.innerHTML = "Click this paragraph." +
        " It has been clicked an odd number of times.\
        Clicked " + clickCounter + " times with counting enabled." ;
      }
      else {  
        clickCounter += 1;
        para1.style = "font-size:0.9em";
        para1.innerHTML = "Click this paragraph." +
        " It has been clicked an even number of times.\
        Clicked " + clickCounter + " times with counting enabled.";
      }    
      clickMeEvenTimes = !clickMeEvenTimes;
 }

 function toggleParagraphCounter(event) {
 doClickCount =! doClickCount;
     if (doClickCount) {
document.getElementById("para1").onclick = function() {
    countPar1();
};       
 }  else {
 document.getElementById("para1").onclick = function() {
     clickMe();
   };

    }
 }