JavascriptでシンプルにOn・Off切り替えボタン
JavascriptでシンプルにOn・Off切り替えボタン:
JavascriptでOn・Offを切り替え、任意の要素の中身を変更する方法
ユーザーのアクションによって２パターンの表示切り替えをしたいとき
JavascriptでOn・Offを切り替え、任意の要素の中身を変更する方法
コード
demo.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Apply JavaScript example</title>
</head>
<body>
<p style="background-color: gray;" class="btn">退出中</p>
<p style="background-color: red;color: white;" class="now">今いません。</p>
<script>
var btn = document.querySelector('.btn');
var now = document.querySelector('.now');
btn.addEventListener('click', changeSomething);
function changeSomething() {
if (btn.textContent === '退出中') {
btn.textContent = '在宅';
now.style.backgroundColor = 'green';
} else {
btn.textContent = '退出中';
now.style.backgroundColor = 'red';
}
}
</script>
</body>
</html>
コメント
コメントを投稿