0
各ラジオボタンを1回クリックすると、正しく機能しなくなります。この例ではonchangeを使用しています。あなたがcurrentDateRow.innerHTML = currentDateRow.innerHTML + ...を行うときに、そこにDOMサブツリーを再作成しているので、だから私は... Javascriptを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>
TRの内容を 'innerHTML'に置き換え、効果的にラジオボタンを削除し、新しいボタンを追加します。イベントハンドラは、あなたが挿入したばかりの新しい要素ではなく、古い要素にバインドされています。 – adeneo