如何在javascript中更改onclick属性？

Question

I have HTML that displays a button and a paragraph. When you click on the paragraph, it indicates whether the paragraph has been clicked on an odd or even amount of times. I'm trying to get the button to expand the paragraph to include a count of how many times the paragraph has been clicked, and revert back to it's original text when the button is clicked again. For some reason, I don't think my button properly communicates with the paragraph. Here's my code:

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

 }

What else could I do to try and solve this?

Answer 1

You are declaring the clickMe function twice, below I have reformatted your code.

 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

Hey so here's the code that worked:

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

    }
 }