JavaScript 仅在运行第一次点击时起作用

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 仅在运行第一次点击时起作用

JavaScript functions only run on first click

javascript

dom-events

JavaScript 仅在 运行 第一次点击时起作用

JavaScript functions only run on first click

javascript

dom-events

JavaScript 仅在运行第一次点击时起作用