問題1 : 要素をidで取得
下記のコードの要素をid名を使用して取得してください。
<div id="hoge">hogehoge</div>
参考ソース
document.getElementById("hoge");
問題2 : idから値を取得
下記のコードの値をid名を使用して取得してください。
<input type="text" id="hoge" value="hoge" />
参考ソース
document.getElementById("hoge").value;
問題3 : ユーザーが入力した値を取得
下記キャプチャのように、名前入力欄を作成してください。
名前入力欄からフォーカスが外れた時に、値をコンソールログに表示してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>名前</p>
<div><input type="text" id="user_name" /></div>
</body>
<script>
let userName = document.getElementById("user_name");
userName.addEventListener('blur',function(){
console.log(userName.value);
});
</script>
</html>フォーカスが外れた時のイベント処理にblurを使用しています。
問題4 : 要素の追加
javascriptの要素の追加の処理とループ処理を使用して、3列3行のテーブルを生成してください。
サンプル画像
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="table_position"></div>
</body>
<style>
table {
border-collapse: collapse;
border: solid 1px;
}
th {
background-color:yellow;
}
td {
border: solid 1px;
}
</style>
<script>
let tablePosition = document.getElementById("table_position");
let table = document.createElement('table');
for (i = 1; i <= 3; i++) {
let tr = document.createElement('tr');
for (h = 1; h <= 3; h++) {
if (i === 1) {
let th = document.createElement('th');
th.textContent = i + '行目' + h + '列目';
tr.appendChild(th);
} else {
let td = document.createElement('td');
td.textContent = i + '行目' + h + '列目';
tr.appendChild(td);
}
}
table.appendChild(tr);
}
tablePosition.appendChild(table);
</script>
</html>
要素の追加をする手順として、idから要素の取得をします。
その後に「table」や「th」「tr」「td」などの要素をcreateElement()を使用して生成します。
appendChildを使用して親要素に対して子要素を追加しています。
また今回は3列3行ですが、これが何列何行になっても改修が楽になるようにfor文の繰り返し処理を活用しています。
最初に行のループをさせて、次に列のループをさせています。
独学が難しい場合
現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。
コメント