

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/NZLm9.jpg)](https://i.stack.imgur.com/NZLm9.jpg)


CC BY-SA 4.0
2022-08-16T07:17:52.553
90582
2022-08-17T01:30:50.523
2022-08-16T08:59:09.730
3060
54008
question
javascript jquery
ボタンを押すと画像がフェードイン・フェードアウトするという動作をしたい


**前提知識**

  * `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`ボタンをクリックすると画像がフェードイン・フェードアウトするシンプルなサンプルコード例です。

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2022-08-17T00:51:43.180
90589
2022-08-17T01:30:50.523
2022-08-17T01:30:50.523
2376
9820
90582
answer