0

ボタンを押すと画像がフェードイン・フェードアウトするという動作をしたいのですが、上手く繋げれていないみたいです。多分idが必要だと思うのですが、どう打ち込むのが正解でしょうか?

以下は現時点での状態です。
初心者のためまだまだ分からないことが多いですがよろしくお願い致します。

画像の説明をここに入力

1
  • 3
    コードは画像ではなくテキストとして貼り付けて下さい。貼り付けたコードを正しく表示するには、Markdown の コードブロックとしてマークアップする必要があります。ja.stackoverflow.com/editing-help#code マークアップが難しければ、最初はとりあえず貼り付けたままでも構いません。
    – mjy
    Commented 2022年8月16日 8:51

1 件の回答 1

2

前提知識

  • id<button id="hoge">のように宣言します。
    コード内で複数宣言できず、jQueryでは$("#hoge")のように#を使って表現します。
  • class<button class="fuga">のように宣言します。
    コード内で複数宣言でき、jQueryでは$(".fuga")のように.を使って表現します。

コードレビュー

  • 9行目の$("#btn-space").click(function(){について、function){に対応する閉じかっこ}がありません。
    これではスクリプトが動作しません。
  • 9,10行目のbtn-spaceはボタンそのものではなく、ボタンを配置しているdivタグです。
    ボタンを押しても応答しません。
  • 11行目の#appearがhtml内のidとして宣言されていません。
    そのため何に対してfadeInするのか解釈できません。
  • 6行目のbase.cssが質問文で示されていません。
    質問する際はテキスト形式で貼り付けると良いでしょう。
  • 8行目の<head>内でクリックイベントなどを記述していますが、教材のサンプルでもそのような記述になっていますか?
    後述のサンプルコードのように<body>の末尾に書かれてはいませんか?

htmlおよびjavascriptの知識を整理して、ご自身のコードのどこが間違っているのかを推測しながら試行錯誤することが大事です。
上記を踏まえて、教材のテキストを読み直して落ち着いてがんばってください。

サンプルコード

fadeToggleボタンをクリックすると画像がフェードイン・フェードアウトするシンプルなサンプルコード例です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>フェードイン・フェードアウト</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <div>
    <div>
      <button id="btn-fade">fadeToggle</button>
    </div>
    <div>
      <img class="img-fade" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAI7SURBVFhH7VXPK0RRFPaHKFbKwsJCSiipKQuFhYUSyYJkQxZTipWSUhYWlFIsJMpGLCwkwzSmQfJjaJRfYQozfoxMOPqOd6c71x3mzZv8/upbvHfePfd753z33BRHXip9Jf8F/C4B63UldL3podWqIm1cx6QJcNoy6fEmSEDo0MfPuu9UJrUCO/Z6FgBcOedpKT9N+51MSwKwgVruo6FeQwLR8Uh/VExHSwJOJ4bpKfxAvh575B1EXTrmDAlE3vaGqDUqExbgLs+l8IXf2IbIPztJzuIMjqH/8AHwdB+itRrbm/WClirgKs2moGeZNwLufDvkqSzgGFojTHl/ckCukqw360HLJlwqTOdeCzze3UbKvt1Wa7wlCrgWtKY0LcDb0cSJ1WQ4AeKPgZOxQRYnmxLv5DWgKQHyWUdZ9/s6o847yn/r3eA4cL3uopWyHLqYn+HKyGYVNCUAfUVSGUiM0yB6j78+nx43osRG3WqpjsRVJuQBjFxsgiMoA8MHm6E9e12tHH/wn3IVdHlASyaEsw8GunkTGTiCKPdGY8WH90LcAvBnu53NnFA1IMoOc+IikgFx8nc6xi0g4F400r4OF3gBvUepMWggAt+hPRhK6L0YTO8xbgHoLwwXC8/hMJ+As6lRLn8s06k05QGUHokxaDB8MFzksy8DLdPlUBlTgIAuphL3AgYRhg4uIphSjF4BdY1gUgS8RwFdDIxbgFnEyqPy5whIlAK6GPj9BSQLuj3A7yvgs/jXBaTSC91J3opQUYNpAAAAAElFTkSuQmCC">
    </div>
  </div>
  <script>
    $("#btn-fade").click(function(){
      $(".img-fade").fadeToggle("slow");
    });
  </script>
</body>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。