2016-03-28 22 views
0

Her radyo düğmesine bir kez tıkladıktan sonra, artık bir daha düzgün çalışmayabilirler. Bu örnekte onchange kullanıyorum. Eğer currentDateRow.innerHTML = currentDateRow.innerHTML + ... yaptığınızda orada DOM alt ağacı yeniden çünkü Yani ... JavaScriptJavascript işlevleri sadece ilk tıklamada çalışır

  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>

+2

TR'in içeriğini 'innerHTML' ile değiştiriyorsunuz, bu sayede radyo düğmelerini etkin bir şekilde kaldırarak yenilerini ekliyorsunuz. Olay işleyicisi, yeni eklediğiniz yeni öğelere değil eski öğelere bağlı. – adeneo

cevap

1

eleman checked

ise sadece fonksiyonunu çalıştırmak için ayarlayın ve' Etkinlik işleyicinizi (ler) kaybediyorsunuz.

+0

Müthiş. Yardım için teşekkürler! –

İlgili konular