基本構文を使用して表示を制御してみよう
if文、for文
if文やfor文を使用して、ボタンを押下することで表示、非表示の切り替わる文字列を実装していきます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>8.3</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>visibilityプロパティを使用して表示を切り替える</p>
<p id="test1">あいうえお</p>
<button onClick="hide()">非表示にする</button>
<button onClick="show()">表示する</button>
<button onClick="showHide()">表示／非表示</button>
<p>displayプロパティを使用して表示を切り替える</p>
<p id="test2">かきくけこ</p>
<button onClick="displayHide()">非表示にする</button>
<button onClick="displayShow()">表示する</button>
<button onClick="displayShowHide()">表示／非表示</button>
<p>渡された引数の数分の数値を表示</p>
<p id="test3"></p>
<button onClick="repetitionShowNum(5)">数値を表示</button>
</body>
<script src="script.js"></script>
</html>
script.js
/** visibilityを使用して非表示 */
const hide = () => {
let element = document.getElementById("test1");
element.style.visibility = "hidden";
};
/** visibilityを使用して表示 */
const show = () => {
let element = document.getElementById("test1");
element.style.visibility = "visible";
};
/** visibilityを使用して表示／非表示 */
const showHide = () => {
let element = document.getElementById("test1");
if (element.style.visibility === "hidden") {
element.style.visibility = "visible";
} else {
element.style.visibility = "hidden";
}
};
/** displayを使用して非表示 */
const displayHide = () => {
let element = document.getElementById("test2");
element.style.display = "none";
};
/** displayを使用して表示 */
const displayShow = () => {
let element = document.getElementById("test2");
element.style.display = "block";
};
/** displayを使用して表示／非表示 */
const displayShowHide = () => {
let element = document.getElementById("test2");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
};
/** 渡された引数の数分の数値を表示 */
const repetitionShowNum = (num) => {
let element = document.getElementById("test3");
for (let i = 1; i <= num; i++) {
element.textContent += i;
}
};
参考