第9章まとめクイズ

クイズ1

次のコードを読み込んだページで起きることとして、正しいものはどれですか。

function showMessage() {
  document.querySelector(".tagline").textContent = "こんにちは。山田 太郎です。";
}

const button = document.querySelector(".submit-button");
button.addEventListener("click", showMessage());

クイズ2

次のコードを登録したうえで、1 枚目の作品カード .work-card の中にある h3 の文字の上をクリックすると、コンソールに何が 2 行出力されますか。カードは .work-list の中に並んでいます。

const workList = document.querySelector(".work-list");

workList.addEventListener("click", function (event) {
  console.log(event.currentTarget.className);
  console.log(event.target.tagName);
});

クイズ3

お問い合わせのメッセージ欄 #message に 12 と打ち込んだ状態で次のコードを実行すると、コンソールに何が 2 行出力されますか。

const message = document.querySelector("#message");

console.log(message.value + 1);
console.log(message.value.length);

クイズ4

送信ボタンを押したときも、入力欄で Enter キーを押したときも同じ処理を通したいとします。addEventListener を登録する相手とイベント名の組み合わせとして正しいものはどれですか。

クイズ5

次のコードを登録したページで、お名前欄 #name に文字を入れて送信した場合と、空のまま送信した場合とで、ページの再読み込みはそれぞれどうなりますか。

const form = document.querySelector(".contact-form");
const nameInput = document.querySelector("#name");

form.addEventListener("submit", function (event) {
  const value = nameInput.value.trim();
  if (!value) {
    return;
  }
  event.preventDefault();
  nameInput.value = "";
});

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。