Question

单击每个单选按钮一次后，它们将无法正常运行。我在这个例子中使用onchange。因此，如果元素为checked

，我将其设置为仅运行该函数

的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>

Answer 1

...因为当您执行currentDateRow.innerHTML = currentDateRow.innerHTML + ...时，您正在重新创建DOM子树，并且您正在丢失事件处理程序。

Javascript函数仅在第一次单击时运行

1 个答案: