Javascript函數只能在第一次點擊時運行

單擊每個單選按鈕一次後，它們不能正常運行。在本例中，我使用的是onchange。所以我將它如果元素是checkedJavascript函數只能在第一次點擊時運行

只運行功能的Javascript

  window.addEventListener("load", link_events, false); 
 
      var d = new Date(); 
 
      var month = new Array(); 
 
      month[0] = "January"; 
 
      month[1] = "February"; 
 
      month[2] = "March"; 
 
      month[3] = "April"; 
 
      month[4] = "May"; 
 
      month[5] = "June"; 
 
      month[6] = "July"; 
 
      month[7] = "August"; 
 
      month[8] = "September"; 
 
      month[9] = "October"; 
 
      month[10] = "November"; 
 
      month[11] = "December"; 
 
      var m = month[d.getMonth()]; 
 
      var day = d.getDate(); 
 
      var year = d.getFullYear(); 
 
      
 
      var currentSelected = false; 
 
      var specifiedSelected = false; 
 
      function link_events(){ 
 
       document.getElementById("current").onchange = currentDisplay; 
 
       document.getElementById("specified").onchange = specifiedDisplay; 
 

 
      } 
 
      
 
      function currentDisplay(){ 
 
       if(document.getElementById('current').checked){ 
 
       var currentDateRow = document.getElementById("currentDateRow"); 
 
       currentDateRow.innerHTML = currentDateRow.innerHTML + "<td id='currentDate' style='font-family:Verdana;font-size:1.5em;'>" + m + ' ' + day + ', ' + year + "<td>"; 
 
       document.getElementById("current").checked = true; 
 
       var elem = document.getElementById("specifiedDate"); 
 
       elem.parentNode.removeChild(elem); 
 
       } 
 
       
 
      } 
 
      
 
      function specifiedDisplay(){ 
 
       if(document.getElementById('specified').checked){ 
 
       var specifiedDateRow = document.getElementById('specifiedDateRow'); 
 
       specifiedDateRow.innerHTML = specifiedDateRow.innerHTML + " <td> <input id='specifiedDate' type='text' class='datepicker'></td>"; 
 
       document.getElementById("specified").checked = true; 
 
       var elem1 = document.getElementById("currentDate"); 
 
       elem1.parentNode.removeChild(elem1); 
 
       } 
 
      }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>BIS 3523 - Assingment 10 - Trivia</title> 
 
     <link type="text/css" rel="stylesheet" href="Trivia.css" /> 
 
     
 
     <script src="hw06.js"></script> 
 
    <head> 
 
    <body style="background-color:gray"> 
 
     
 
     <form> 
 
      <table align=center style="margin-top:20%"> 
 
       <thead> 
 
        <tr> 
 
         <th colspan=3 > 
 
          Select a Trivia Date 
 
         </th> 
 
        </tr> 
 
       </thead> 
 
        <div> 
 
        <tr id='currentDateRow'> 
 
         <td> 
 
          <input type='radio' name='date' value='current' id='current'> Current Date      
 
         </td> 
 
         
 
        </tr> 
 
        <tr id='specifiedDateRow'> 
 
         <td> 
 
          <input type='radio' name='date' value='specified' id='specified'> Specified Date 
 
         </td> 
 
        </tr> 
 
        </div> 
 
       <tbody> 
 
       </tbody> 
 
      </table> 
 
     </form> 
 
     
 
    </body> 
 

 

 

 

 

 
</html>

來源

2016-03-28 Taylor Clark

您正在用'innerHTML'替換TR的內容，有效地刪除單選按鈕，然後添加新的。事件處理程序綁定到舊元素，而不是剛剛插入的新元素。 – adeneo

...因爲當你做currentDateRow.innerHTML = currentDateRow.innerHTML + ...你在那裏重新創建DOM樹和你」重新放棄你的事件處理程序。

來源

2016-03-28 02:03:56

太棒了。謝謝您的幫助！ –

Javascript函數只能在第一次點擊時運行

回答

相關問題