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

    }
 }

如何在javascript中更改onclick属性？

2 个答案: