<!DOCTYPE html>
<html>
<head>
<title>時間割作成アプリ</title>
<script type="text/javascript">
const subjects = ["算数", "国語"];
function getTotalForSubject(subject){
let total = 0;
for(let i = 1; i <= 6; i++){
const element = document.getElementById(`${subject}-${i}`);
if(element.value === subject){
total++;
}
}
return total;
}
function getTotalForWeek(){
let total = 0;
for(let i = 0; i < subjects.length; i++){
total += getTotalForSubject(subjects[i]);
}
return total;
}
function updateTotals(){
for(let i = 0; i < subjects.length; i++){
const subject = subjects[i];
const subjectTotal = getTotalForSubject(subject);
const subjectTotalElement = document.getElementById(`${subject}-total`);
subjectTotalElement.innerHTML = subjectTotal;
}
const weekTotal = getTotalForWeek();
const weekTotalElement = document.getElementById("week-total");
weekTotalElement.innerHTML = weekTotal;
}
</script>
<style type="text/css">
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
td {
width: 100px;
height: 50px;
}
select {
width: 80px;
height: 30px;
font-size: 14px;
padding: 3px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>時間割作成アプリ</h1>
<table>
<thead>
<tr>
<td></td>
<th>1時間目</th>
<th>2時間目</th>
<th>3時間目</th>
<th>4時間目</th>
<th>5時間目</th>
<th>6時間目</th>
</tr>
</thead>
<tbody>
<tr>
<th>月曜日</th>
<td id="算数-1"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td id="国語-1"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td></td>
<td></td>
<td id="算数-5"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td id="国語-5"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
</tr>
<tr>
<th>火曜日</th>
<td></td>
<td></td>
<td id="算数-3"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td id="国語-3"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td id="算数-4"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td id="国語-4"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
</tr>
<tr>
<th>水曜日</th>
<td></td>
<td id="算数-2"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td></td>
<td></td>
<td></td>
<td id="国語-6"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
</tr>
<tr>
<th>木曜日</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>金曜日</th>
<td></td>
<td id="国語-2"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td id="算数-6"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>土曜日</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="算数-6"><select onchange="updateTotals()" name="subject">
<option value="選択してください">選択してください</option>
<option value="算数">算数</option>
<option value="国語">国語</option>
</select></td>
</tr>
<tr>
<th>合計</th>
<td id="算数-total"></td>
<td id="国語-total"></td>
<td></td>
<td></td>
<td id="算数-total"></td>
<td id="国語-total"></td>
</tr>
<tr>
<th>毎週の合計</th>
<td colspan="6" id="week-total"></td>
</tr>
</tbody>
</table>
</body>
</html>
