Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
国名を入力して国旗を変える
tableのCSSを設定
border-collapse: collapse
隣接するセルのボーダーを重ねて1本の線にすることができます。
<head>
<meta charset="utf-8">
<style>
body { text-align: center; }
table {
border-collapse: collapse;
margin: auto;
}
td {
border: 1px solid;
width: 150px;
height: 300px;
}
</style>
<title>国名を入力して国旗を変える</title>
</head>captionで表のタイトルを設定。
<tr>タグの中で<td>タグを3つ作成することで1行3列の表を作成することができます。
idを使うことによって左のセルをleft,中央のセルをmiddle,右のセルをrightと指定します。
指定した各要素をdocument.getElementById
クリックしたときに働く関数changeCol()をonclickで指定します。
promptで入力ダイアログを表示させることができます。
<body>
<table>
<caption id="cap">国名</caption>
<tr>
<td id="left"></td>
<td id="middle"></td>
<td id="right"></td>
</tr>
</table>
<br>
<input type="button" value="国名を入力する" onclick="changeCol()">
<script>
function changeCol() {
var cap = document.getElementById("cap");
var cel_l = document.getElementById("left");
var cel_m = document.getElementById("middle");
var cel_r = document.getElementById("right");
var country = prompt("どの国の国旗にしますか？\nフランス、イタリア、ギニアのいずれかを入力してください。","");
cap.textContent = country;
if(country == "フランス") {
cel_l.style.backgroundColor = "navy";
cel_m.style.backgroundColor = "white";
cel_r.style.backgroundColor = "red";
}
else if(country == "イタリア") {
cel_l.style.backgroundColor = "green";
cel_m.style.backgroundColor = "white";
cel_r.style.backgroundColor = "red";
}
else if(country == "ギニア") {
cel_l.style.backgroundColor = "red";
cel_m.style.backgroundColor = "gold";
cel_r.style.backgroundColor = "green";
}
else {
alert("入力できる国名はフランス、イタリア、ギニアのいずれかです。");
}
}
</script>
</body>
