解答
課題の解答です。
必ずしもこの回答だけが正解というわけではなく、書き方はいろいろなパターンがあります。
基本的にはエラーが無く、要件を満たす動きがされていたらOKです。実装方法に不明点がありましたら、質問してみてください。
要素の取得 document.getElement…
問1：JavaScriptから要素を操作して、四角の色が赤色に変わるようにしてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box');
box.style.backgroundColor = 'red';
</script>
</body>
</html>要素の取得 document.querySelector…
問1：テキストの表示非表示を切り替えるボタンを作成してください。（getElementByIdとquerySelectorのどちらを使用しても大丈夫です）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="button" value="ボタン" onClick="changeBtn()">
<p id="p1">ボタンが押されると表示非表示が切り替わります。</p>
<script>
function changeBtn() {
//id「p1」の要素を取得
let p1 = document.getElementById('p1');
//または、 let p1 = document.querySelector('#p1');
// ②取得したp1に「display:none」が無かったら、「display:none」を付与する。
if (p1.style.display != 'none') {
p1.style.display = 'none';
// 取得したp1に「display:none」があったら、「display:block」を付与する。
} else if (p1.style.display == 'none') {
p1.style.display = 'block';
}
}
</script>
</body>
</html>イベント
問1：ボタンを押したら、「大吉」「中吉」「凶」と文字が変わるようなおみくじを作成してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#btn {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;;
font-weight: bold;
user-select: none;
}
#btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div id="btn">クリック</div>
<script>
//btnを取得
const btn = document.getElementById('btn');
// ボタンがクリックされたら、という処理の始まり
btn.addEventListener('click', function() {
//①配列で「大吉」「中吉」「凶」を準備
const results = ['大吉', '中吉', '凶'];
//②乱数を発生させて、その値を取得
const n = Math.floor(Math.random() * results.length);
//③取得した **btn** の「クリック」という文字を配列の中身の文字にランダムに変化させる
btn.textContent = results[n];
}, false);
</script>
</body>
</html>要素の追加
問1：以下の要件を満たすように「追加ボタン」と「削除ボタン」実装してください。
・「追加ボタン」：指定した文字をテキストエリアに追加することができる。
・「削除ボタン」：テキストエリア内を空にする削除する。
・「削除ボタン」が押された時は、入力エリア内のテキストも削除するようにする。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="text1" placeholder="入力してください">
<input type="button" value="追加" onclick="addText();">
<input type="button" value="削除" onclick="deleteText();">
<br>
<textarea id="area1" cols="50" rows="8" placeholder="ここに出力されます"></textarea>
<script>
function addText() {
//①入力欄のテキストを取得
let text1 = document.getElementById('text1').value;
//②出力欄のテキストエリアを取得
let area1 = document.getElementById('area1');
//③出力欄に入力された文字列を足していく
area1.value += text1 + "\n";
}
function deleteText() {
//④出力欄のテキストを空にする
area1.value = '';
//⑤入力欄のテキストを空にする
text1.value = '';
}
</script>
</body>
</html>
