【JS&CSS】ボタンを押したらメッセージを表示する方法4選

// 変数を使って "Hello" を表示するダイアログボックス
const text = "Hello";  // 変数にメッセージを代入
alert(text);  // 変数の値を表示

// 直接 "Hello" を表示するダイアログボックス
alert('Hello');  // 文字列を直接渡す

<div class="btn-container">
  <button id="btn1">ボタン１</button>
</div>

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
  alert('ボタン１がクリックされました！');
});

<div class="btn-container">
  <button id="btn2">ボタン２</button>

  <!-- クリックで表示させるテキストにはhiddenクラスを付ける -->
  <p id="btn2-text" class="hidden">ボタン２がクリックされました！</p>
</div>

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

/* クリックで表示させるテキストを隠す */
.hidden {
  display: none;
}

#btn2-text{
  margin: 16px 0;
  font-size: 14px;
  color: red;
}

const btn2 = document.getElementById('btn2');
const btn2Text = document.getElementById('btn2-text');

btn2.addEventListener('click', () => {
  // ボタンクリックでhiddenクラスを付け外しする
  btn2Text.classList.toggle('hidden');
});

<div class="btn-container">
  <button id="btn4">ボタン４</button>
</div>
<p id="btn4-text" class="hidden">ボタン４がクリックされました！</p>

.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

/* ポップアップメッセージを隠す */
.hidden {
  display: none;
}

/* ポップアップメッセージを画面右下に配置 */
#btn4-text {
  height: 72px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
  line-height: 72px;
  position: fixed;
  right: 5%;
  bottom: 10%;
}

/* ポップアップアニメーションを3秒かけて実行 */
.popup-message {
  animation: popup 3s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}

const btn4Text = document.getElementById('btn4-text');
const btn4 = document.getElementById('btn4');

btn4.addEventListener('click', () => {
  btn4Text.classList.remove('hidden');
  btn4Text.classList.add('popup-message');
});

btn4Text.addEventListener('animationend', () => {
  btn4Text.classList.remove('popup-message');
  btn4Text.classList.add('hidden');
});