楽しくプログラミング！ HTML生成！- 2
for 文で連続的にタグを作ってボタンを作ってみます。
HTMLを書かずしJavaScriptの
document.createElement()を作ってボタンを作ります。
1から9までの数字が入ったボタンを作ります。for 文で繰り返しボタンを作っていきます。for文を2重にしています。
for(let i=0; i<3; i++){
for(let j=0; j<3; j++){
const button = document.createElement("button");
button.innerHTML = i * 3 + j + 1;
button.onclick = () => {
console.log(`ボタン${button.innerHTML}が押されました！`);
}
}
} これで表示が確認できたらこれを3つ並んだら改行して3X3のボタンとします。方法は<div>を3つ並んだら表示させ改行した感じにします。
for(let i=0; i<3; i++){
const div = document.createElement("div");
for(let j=0; j<3; j++){
const button = document.createElement("button");
button.innerHTML = i * 3 + j + 1;
button.onclick = () => {
console.log(`ボタン${button.innerHTML}が押されました！`);
}
}
document.body.appendChild(div);
} これで3X3のボタンができました。
これをCSSを指定できる"style"使いを見た目を変えていきたいと思います。
ボタンには
document.body.appendChild(button);
button.style.fontSize = "20px"
button.style.fontFamily = "sans-serif"
button.style.padding = "20px"
button.style.margin = "5px"
そして、ボタンの後にも文字を入れて、CSSを指定してみます。
const div2 = document.createElement("div");
div2.innerHTML = '<p>CreateElementで作りました</p> <p>スタイルも変更しました</p>';
document.body.appendChild(div2);
div2.style.fontSize = "20px"
div2.style.fontFamily = "sans-serif"
これで
こんな感じにボタンの大きさも間隔も調整できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CreateElement</title>
</head>
<body>
<script>
for(let i=0; i<3; i++){
const div = document.createElement("div");
for(let j=0; j<3; j++){
const button = document.createElement("button");
button.innerHTML = i * 3 + j + 1;
button.onclick = () => {
console.log(`ボタン${button.innerHTML}が押されました！`);
}
document.body.appendChild(button);
button.style.fontSize = "20px"
button.style.fontFamily = "sans-serif"
button.style.padding = "20px"
button.style.margin = "5px"
}
document.body.appendChild(div);
}
const div2 = document.createElement("div");
div2.innerHTML = '<p>CreateElementで作りました</p> <p>スタイルも変更しました</p>';
document.body.appendChild(div2);
div2.style.fontSize = "20px"
div2.style.fontFamily = "sans-serif"
</script>
</body>
</html>この記事が気に入ったらサポートをしてみませんか？