常連

注目の的

回答者

拍手喝采

自己紹介

有名人

### 前提・実現したいこと
- Vue.jsで、子コンポーネント内に定義されたメソッドを親コンポーネントから呼び出したい
- 子コンポーネントは親コンポーネントのループ内で呼び出している
- 呼び出せずにエラーになる

具体的には、記事一覧ページに表示されている個々の記事に編集ボタンを設け、
ダイアログ上で内容を更新できるようにしようとしています。


### 発生している問題・エラーメッセージ
記事更新しようとすると、ブラウザで見た時にコンソールに次のようなエラーが出ます。
```
app.js:36742 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'update')"
```

### 該当のソースコード
↓親コンポーネント

```vue
<template>
<v-card v-for="(inquiry,index) in inquiries" :key="inquiry.id" class="inquiry" flat :id="inquiry.id">
        <v-toolbar color="primary" dark dense>
            <v-dialog max-width="90%" scrollable>
                <template v-slot:activator="{ on, attrs }">
                    <v-btn icon v-bind="attrs" v-on="on">
                        <v-icon>mdi-square-edit-outline</v-icon>
                    </v-btn>
                </template>
                <template v-slot:default="dialog">
                    <v-card>
                        <v-toolbar color="primary" dark>記録編集</v-toolbar>
                        <v-card-text>
                            <RecordForm :inquiry="inquiry" ref="RecordForm"></RecordForm>
                        </v-card-text>
                        <v-card-actions class="end">
                            <v-btn text @click="edit(index,inquiry.id)">更新</v-btn>
                            <v-btn text @click="dialog.value = false">閉じる</v-btn>
                        </v-card-actions>
                    </v-card>
                </template>
            </v-dialog>
        </v-toolbar>
</v-card>
</template>

<script>
    import RecordForm from '../layout/RecordForm'

    export default {
        components: {
            RecordForm,
        },
        mounted() {
            axios.get('/api/inquiries/archive')
                .then(response => {
                    this.inquiries = response.data.data.reverse()
                })
        },
        methods: {
            edit(index, id) {
                console.log(index)
                this.$refs.RecordForm[index].update(id)
            },
        },
    }
</script>

```


↓子コンポーネント(RecordForm.vue)
```vue
//js部分
<script>
    export default {
        name: 'RecordForm',
        props: ["inquiry"],

        //中略

        methods: {
            postData(id) {
                let postData = {
                    //(中略)
                }
                return postData
            },
            update(id) {
                let postData = this.postData(id)
                axios.post('/api/inquiries/edit', postData)
                    .then(response => {
                        alert('更新しました。');
                        console.log(response);
                    })
            },
        }
    }
</script>
```


### 試したこと
ここでは省略していますが、
親コンポーネントにおけるループ外の新規投稿ボタンから「子コンポーネント内に定義された新規投稿メソッド」を呼び出すことはできました。

なのでループの場合のみ起こる現象だと考えています。

下記の記事
[https://qiita.com/gigazombie/items/6f53a1de17c370787eac](https://qiita.com/gigazombie/items/6f53a1de17c370787eac)
を見て、
- 親コンポーネントから子コンポーネントのメソッドを呼びたい時は$refsを使えば可能
- v-forの引数として提供されているindexを渡す必要がある
というところまでわかったのですが、その先に進めない状態です。

どなたか知恵を貸していただきたいです。



### 補足情報（FW/ツールのバージョンなど）
Vue2
Laravel8

v-for中に登場する「子コンポーネント」内に定義されたメソッドを、親から$refsで呼びたい。

```html 

    <div id="slide">
      <ul class="">
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>
    </div>
    <buttn id="pre">左</buttn>
    <buttn id="next">右</buttn>
```
```css

#slide {
  overflow: hidden;
  position: relative;
  height: 500px;

}

ul {
  position: absolute;
  width: 3000px
}

ul li {
  width: 1000px;
  background: #777;
  height: 500px;
  float: left;
  li


#slide {
  overflow: hidden;
  position: relative;
  height: 500px;

}

ul {
  position: absolute;
  width: 3000px
}

ul li {
  width: 1000px;
  background: #777;
  height: 500px;
  float: left;
  li

```

```js

  <script>
    'use strict';
    $(function() {
      var dir = -1;
      var intervar = 3000;
      var duration = 700;
      var timer;


      $('#slide ul').prepend($('#slide li:last-child'));
      $('#slide ul').css('left', -1000);
      timer = setIntervar(slideTimer, intervar);

      function slideTimer() {

        if (dir == -1) {
          $('#slide ul').animate({
            'left': '-=1000px'
          }, duration, function() {
            $(this).append($('#slide li:first-child'));
            $(this).css('left', -1000);

          });
        } else {

          $('#slide ul').animate({
            'left': '+=1000px'
          }, duration, function() {
            $(this).prepend($('#slide li:last-child'));
            $(this).css('left', -1000);
            dir = -1;
          });

        }


      }

      $('#pre').click(function() {
        dir = 1;

        clearInterval(timer);
        timer = setInterval(slideTimer, interval);

        slideTimer();
      });

      $('#next').click(function() {
        dir = -1;


        clearInterval(timer);
        timer = setInterval(slideTimer, interval);

        slideTimer();
      });


    });
```
スライド領域の左側に他の要素がちらつく原因は何でしょうか。
エラーメッセージも特に出ていないので何を直せば良いかわからない状態です。
ちなみに右にスライドした時はちらつかないです。

左にスライドした時に他の要素が一瞬チラついてしまうのを無くしたい

【実現したいこと】
cssとjqueryでスクロール時に画像を横からフェードインしたい。（レイアウト崩れなしで）
translateで右にずらし、所定の位置までスクロールするとtranslateを(0,0)にしています。

【うまくいかないこと】
translateで右にずらした時にレイアウト崩れがおきます。
（ヘッダーとトップ画像が右にずらしている画像の分広がる）

解決策をご教授お願いできますでしょうか。
よろしくお願いします。
```html

<header>
	<div class="header">
		<div class="telCon">
			<img src="image/xxx.png" alt="">
		</div>
		<div class="logoCon">
			<h1>
				<img src="image/xxx.png" alt="">
			</h1>
		</div>
		<div id="menuWrapper">
			<a id="menuButton"><span>text</span></a>
		</div>
	</div>
	<div class="topImgCon">
		<img src="image/xxx.jpg" alt="" class="topImg">
		<img src="image/xxx.jpg" alt="" class="topImg">
		<img src="image/xxx.jpg" alt="" class="topImg">
	</div>
</header>

<section>
		<div class="plspyCon">
			<div class="plspyBack"></div>
			<h2>
				<span class="plspyJpttl">text</span>
				<span class="plspyEngttl">text</span>
			</h2>
			<div class="plspyLogoCon">
				<img src="" alt="">
			</div>
			<div class="plspyTextCon">
				<p>
					text
				</p>
			</div>
			<div class="plspyImgCon fadeRight">
                
				<img src="image/xxx.jpg" alt="">
			</div>
		</div>
	</section>
```
```css
.header {
	background: #ffffff;
	width: 100%;
	height: 80px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
	position: fixed;
	z-index: 9999;
}
.telCon {
	padding-left: 18px;
}
.telCon img {
	width: 40px;
}
.logoCon img {
	width: 120px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}
.topImgCon {
	position: relative;
	padding-top: 80px;
}
.topImg {
	width: 100%;
  object-fit: cover;
	position: absolute;
	transition: 2.5s;
	z-index: -9999;
}
/* --- フェードイン用 --- */
.fadeRight {
	opacity : 0;
	transform : translate(100px, 0px);
	transition : .8s;
}
.fadeScroll {
	opacity : 1;
	transform : translate(0, 0);
}
```
```js
  //フェードイン
  $(function(){
      $('.fadeRight').each(function(){
        let elemPos = $(this).offset().top; //要素の位置を取得
        let elemPosFade = elemPos + 200; //開始位置をずらす
        let scroll = $(window).scrollTop(); //スクロール位置を取得
        let windowHeight = $(window).height(); //ウィンドウの高さを取得
        if (scroll > elemPosFade - windowHeight){
          $(this).addClass('fadeScroll');
        }
      });
    });
  });

```

画像フェードイン時のレイアウト崩れについて

### 前提・実現したいこと

現在javascriptファイルにtest1,test2,test3という関数があります。

そのjavascriptファイルを読み込んでいるviewをリロードした時、下記（修正前）の関数が呼び出されるように行いたかったので以下（修正前）のような記述をし、リロードしたところ関数はしっかり呼び出せました。

しかし、３つとも似たような関数名だったのでループ処理でリファクタリングしようと思いましたが、関数名の一部だけをiに書き換えてループ処理をしたことが自分は初めてだったので、とりあえず式展開などを行ったり試してみましたが（下記に記述の修正後コード）、関数を呼び出すことができず、解決に至らなかったので対処法をご教示願いたいです。



### 修正前

```javascript
$(function() {
	test1();
	test2();
	test3();
});
```

### 修正後

```
$(function() {
	for (var i=1; i<4; i++) {
		test`${i}`();
	}
});
```

javascript関数名をfor文でループ処理させたい

### 前提・実現したいこと

ゲーム作成をしています。以前ゲームのプレイユーザーの名前を登録する方法について[質問](https://teratail.com/questions/213702)し、ポップアップにて名前を入力してもらう方法を教えていただきました。ゲームの仕様として名前を入力して決定すると、ゲームが始まることになっています。今回作成しているゲームが時間によってランキングをつけるものになるので、タイマーをゲーム上部につけた（タイマー追加：[質問](https://teratail.com/questions/218238)）のですが、この**タイマーをポップアップを閉じた直後に作動させる**ようにしたいです。

### 発生している問題・エラーメッセージ

ポップアップを閉じた直後に経過時間を表示させるタイマーを作動させる方法がわかりません。

### 該当のソースコード

```html
<form action="#" name="form1">
経過時間：<input type="text" name="field1" size="8" ></input> 
<br></form>
<script type="text/javascript">
// 初期化
var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;
function disp(){
now = new Date();
datet = parseInt((now.getTime() - start.getTime()) / 1000);//現在時刻-クリック時刻
hour = parseInt(datet / 3600);
min = parseInt((datet / 60) % 60);
sec = datet % 60;
// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }
var timer1 = hour + ':' + min + ':' + sec;
document.form1.field1.value = timer1;
setTimeout("disp()", 1000);
}
</script>
    <br>
    <br>
    <br>
<script>
  var r=[
    ['59:59.95','abc'],
    ['59:59.96','xyz'],
    ['59:59.97','ijk'],
    ['59:59.98','aaa'],
    ['59:59.99','zzz'],
    ];
    var qs=[
    'baby'
      ];
      const viewRank=()=>{
        document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
        };
        window.addEventListener('DOMContentLoaded',()=>{
          viewRank();
          document.querySelector('#start').addEventListener('click',e=>{
            const t1=e.target;
            const t2=document.querySelector('#a');
            t1.disabled=true;
            t2.disabled=false;
            const name=prompt("お名前を入力してください。");//promptにユーザー名の登録
            if(name=="") name="UnKnown";//無記入の場合、Unknownとして登録
            (async()=>{
              const s=new Date().getTime();//開始時刻取得
              for(var i=0;i<qs.length;i++){
                const qStr=qs[i];
                document.querySelector('#q span').textContent=qStr;
                t2.value="";
                t2.focus();
                await new Promise(resolve=>{
                  const timerId=setInterval(()=>{
                    if(t2.value==qStr){
                      clearInterval(timerId);
                      resolve();
                      }
                      },10);
                      });
                      }
                      const e=new Date().getTime();
                      const diff=e-s;
                      const str=(10000+diff/1000).toString();
                      const time=str.substr(1,2)+":"+
                      str.substr(3,5);
                      r.push([time,name]);
                      r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                      viewRank();
                      t1.disabled=false;
                      t2.disabled=true;
                      })();
                      });
                      });
</script>
<input type="button" value="ゲーム開始！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<br>
<br>
<br>
<table border="1">
    <tr>
        <td>
            <div id="rank">現在のランキングトップ５<br>
                <center><span></span></center>
            </div>
        </td>
    </tr>
</table>
```

### 試したこと

タイマーは現状、クリックすると作動するようになっていますが、これをクリックさせずに待機させておき、ポップアップを閉じた直後にカウントを開始するようにすることが最適ではないかと考えました。また、その際、上記ソースコードにもあるように、のちに表示させるために時間を計測しているので、そこで取得したコードを使えるのではないかと考えました。
名前入力後、//開始時刻取得でsに開始時刻を代入しているので、このｓをそのままタイマーの開始時刻に設定しました。できたソースは以下の通りです。
```html
<form action="#" name="form1">
経過時間：<input type="text" name="field1" size="8" ></input> 
<br></form>
<script type="text/javascript">
// 初期化
var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;
function disp(){
now = new Date();
datet = parseInt((now.getTime() - s) / 1000);//現在時刻-s(下部「開始時刻取得」の行のS)
hour = parseInt(datet / 3600);
min = parseInt((datet / 60) % 60);
sec = datet % 60;
// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }
var timer1 = hour + ':' + min + ':' + sec;
document.form1.field1.value = timer1;
setTimeout("disp()", 1000);
}
</script>
    <br>
    <br>
    <br>
<script>
  var r=[
    ['59:59.95','abc'],
    ['59:59.96','xyz'],
    ['59:59.97','ijk'],
    ['59:59.98','aaa'],
    ['59:59.99','zzz'],
    ];
    var qs=[
    'baby'
      ];
      const viewRank=()=>{
        document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
        };
        window.addEventListener('DOMContentLoaded',()=>{
          viewRank();
          document.querySelector('#start').addEventListener('click',e=>{
            const t1=e.target;
            const t2=document.querySelector('#a');
            t1.disabled=true;
            t2.disabled=false;
            const name=prompt("お名前を入力してください。");//promptにユーザー名の登録
            if(name=="") name="UnKnown";//無記入の場合、Unknownとして登録
            (async()=>{
              const s=new Date().getTime();//開始時刻取得
              for(var i=0;i<qs.length;i++){
                const qStr=qs[i];
                document.querySelector('#q span').textContent=qStr;
                t2.value="";
                t2.focus();
                await new Promise(resolve=>{
                  const timerId=setInterval(()=>{
                    if(t2.value==qStr){
                      clearInterval(timerId);
                      resolve();
                      }
                      },10);
                      });
                      }
                      const e=new Date().getTime();
                      const diff=e-s;
                      const str=(10000+diff/1000).toString();
                      const time=str.substr(1,2)+":"+
                      str.substr(3,5);
                      r.push([time,name]);
                      r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                      viewRank();
                      t1.disabled=false;
                      t2.disabled=true;
                      })();
                      });
                      });
</script>
<input type="button" value="ゲーム開始！" id="start">
<font size="5"><div id="q">Q:<span>ここに問題が表示されます。</span></div></font>
<div>A:<input type="text" id="a"></div>
<br>
<br>
<br>
<table border="1">
    <tr>
        <td>
            <div id="rank">現在のランキングトップ５<br>
                <center><span></span></center>
            </div>
        </td>
    </tr>
</table>
```
しかし、これを行うと、タイマーが表示されなくなってしまいました。
ここからどのように直せばいいのでしょうか。
### 補足情報（FW/ツールのバージョンなど）

※サーバーはXREAを使っています。

ポップアップを消した直後にタイマー開始

**困っていること**
スマートフォンにてドロワーナビ内に検索フォームを設置しています。
検索キーワードを入力しようとして、フォーム（検索窓）をタップすると、ドロワーナビが閉じられてしまいます。



**使用しているjs**
```jQuery
! function (e) {
    "use strict";
    "function" == typeof define && define.amd ? define(["jquery"], e) : "object" == typeof exports ? module.exports = e(require("jquery")) : e(jQuery)
}(function (e) {
    "use strict";
    var t = void 0 !== document.ontouchstart,
        s = {
            init: function (t) {
                return t = e.extend({
                    iscroll: {
                        mouseWheel: !0,
                        preventDefault: !1
                    },
                    showOverlay: !0
                }, t), s.settings = {
                    state: !1,
                    events: {
                        opened: "drawer.opened",
                        closed: "drawer.closed"
                    },
                    dropdownEvents: {
                        opened: "shown.bs.dropdown",
                        closed: "hidden.bs.dropdown"
                    }
                }, s.settings.class = e.extend({
                    nav: "drawer-nav",
                    toggle: "drawer-toggle",
                    overlay: "drawer-overlay",
                    open: "drawer-open",
                    close: "drawer-close",
                    dropdown: "drawer-dropdown"
                }, t.class), this.each(function () {
                    var n = this,
                        r = e(this);
                    r.data("drawer") || (t = e.extend({}, t), r.data("drawer", {
                        options: t
                    }), s.refresh.call(n), t.showOverlay && s.addOverlay.call(n), e("." + s.settings.class.toggle).on("click.drawer", function () {
                        return s.toggle.call(n), n.iScroll.refresh()
                    }), e(window).on("resize.drawer", function () {
                        return s.close.call(n), n.iScroll.refresh()
                    }), e("." + s.settings.class.dropdown).on(s.settings.dropdownEvents.opened + " " + s.settings.dropdownEvents.closed, function () {
                        return n.iScroll.refresh()
                    }))
                })
            },
            refresh: function () {
                this.iScroll = new IScroll("." + s.settings.class.nav, e(this).data("drawer").options.iscroll)
            },
            addOverlay: function () {
                var t = e(this),
                    n = e("<div>").addClass(s.settings.class.overlay + " " + s.settings.class.toggle);
                return t.append(n)
            },
            toggle: function () {
                var e = this;
                return s.settings.state ? s.close.call(e) : s.open.call(e)
            },
            open: function () {
                var n = e(this);
                return t && n.on("touchmove.drawer", function (e) {
                    e.preventDefault()
                }), n.removeClass(s.settings.class.close).addClass(s.settings.class.open).drawerCallback(function () {
                    s.settings.state = !0, n.trigger(s.settings.events.opened)
                })
            },
            close: function () {
                var n = e(this);
                return t && n.off("touchmove.drawer"), n.removeClass(s.settings.class.open).addClass(s.settings.class.close).drawerCallback(function () {
                    s.settings.state = !1, n.trigger(s.settings.events.closed)
                })
            },
            destroy: function () {
                return this.each(function () {
                    var t = this,
                        n = e(this);
                    e("." + s.settings.class.toggle).off("click.drawer"), e(window).off("resize.drawer"), e("." + s.settings.class.dropdown).off(s.settings.dropdownEvents.opened + " " + s.settings.dropdownEvents.closed), t.iScroll.destroy(), n.removeData("drawer").find("." + s.settings.class.overlay).remove()
                })
            }
        };
    e.fn.drawerCallback = function (t) {
        var s = "transitionend webkitTransitionEnd";
        return this.each(function () {
            var n = e(this);
            n.on(s, function () {
                return n.off(s), t.call(this)
            })
        })
    }, e.fn.drawer = function (t) {
        return s[t] ? s[t].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof t && t ? void e.error("Method " + t + " does not exist on jQuery.drawer") : s.init.apply(this, arguments)
    }
});
```

```html
<nav class="drawer-nav" role="navigation" style="touch-action: none;">
<h1 class="navi" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">menu</h1>


<div class="serchbox">
<form action="URL"><label><input type="text" name="keyword" maxlength="1000"></label><button type="submit"><i class="material-icons">search</i></button></form>
</div>

<ul class="list-menu">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

</nav>
```

closeの当たりのスクリプトの書き方なのかなと思うのですが、どうぞよろしくお願いいたします。

ドロワーナビゲーションの中の検索フォームをクリックするとドロワーナビが閉じてしまいます。

恐れ入りますが、ご教授いただければ助かります。
imgタグを複数含む要素をjQueryベースで複製するコードを実行したところ、Firefoxでは高さが正しく取得できないことがあります。以下のようなHTMLで500×500pixelの画像を10個含むul要素を複製しています。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    * {margin: 0; padding: 0;}
    ul {list-style: none;}
    button {padding: 10px;}
  </style>
</head>
<body>
  <button class="copy">複製</button>
  <ul class="images">
    <li><img src="images/test/01.jpg"></li>
    <li><img src="images/test/02.jpg"></li>
    <li><img src="images/test/03.jpg"></li>
    <li><img src="images/test/04.jpg"></li>
    <li><img src="images/test/05.jpg"></li>
    <li><img src="images/test/06.jpg"></li>
    <li><img src="images/test/07.jpg"></li>
    <li><img src="images/test/08.jpg"></li>
    <li><img src="images/test/09.jpg"></li>
    <li><img src="images/test/10.jpg"></li>
  </ul>
  
```
```jQuery
  <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('button.copy').click(function() {
      var ul_src = $('ul.images');
      var ul_new1 = ul_src.clone().appendTo('body');
      var ul_new2 = $(ul_src.prop('outerHTML')).appendTo('body');
      alert(
        'ul_src.height=' + ul_src.getHeight() + '\n' +
        'ul_new1.height=' + ul_new1.getHeight() + '\n' +
        'ul_new2.height=' + ul_new2.getHeight());
    });
  });
  $.extend(true, $.prototype, {
    getHeight: function() {
      return this.height();
    }
  });
```
以下は成功した時です。※時々、成功します。
![成功](7c996c38662d843d5c808ee5b99066b7.jpeg)

以下は失敗した時です。※大抵、失敗します。
![イメージ説明](a1136397a89b37c32973427cb8ebb1eb.jpeg)

Chromeでは問題が起きないのですが、それはおそらく画像のキャッシュが働いているせいかと思います。
![イメージ説明](c7766179e9b2f39642c73d4c4ccfdd85.jpeg)

Firefoxでは要素を複製する時に、img.src先をロードする処理が走り、そのタイムラグがあるせいだと思っていますが、ロードが完了するまで待つ良い方法がわかりません。
以下のコードに変えて試してみたのですが、「too much recursion」（再帰呼び出しオーバー）となってしまいます。
```jQuery
  $.extend(true, $.prototype, {
    getHeight: function() {
      var imgNum = this.find('img').length;
      var imgLoad = 0;
      var callback = this.getHeight.bind(this);
      while (imgLoad < imgNum) {
        this.find('img').each(function() {
          if (this.complete || /* for IE */ $(this).height > 0) {
            imgLoad++;
          }
        });
        if (imgLoad == imgNum) {
          break;
        }
        this.find('img').one('load', function() {
            callback();
        }).load();
        // もしくは、setTimeoutで少し待ってみる
        //setTimeout(callback, 100);
      }
      return this.height();
    }
  });
```

どのようにすれば、画像のロード完了を待った後に、要素の高さを取得することができるでしょうか？
詳しい方にご教授いただければ。よろしくお願いいたします。

FirefoxとjQueryで画像を含む要素を複製した時に高さが正しく取得できない

背景画像をレスポンシブデザインに対応させたくてbackgroundプロパティを指定したのですがうまくいきません。
そうすればちゃんと表示できるのでしょうか？
表示させたい画像
![イメージ説明](87b764dcd81e30228ad91edb6cc575aa.png)
![イメージ説明](4d583e552b2e694637d42ff1aee8ddab.png)

私のパソコンの画面
![イメージ説明](46d4d17a64497fef14023726fb723ecb.png)
![イメージ説明](043a2e8687455095fe208a2fedd52f6e.png)

コード
<!doctype html>
<html lang="ja">
  <head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="reset.css">
    
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="no2.js"></script> 
    
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet">
    <title>Airbnbの模写</title>
  </head>
  <body>
    <header>
      <div class="header-btn">
        <div class="search">
          <i class="fas fa-search"></i>
          <p>探す</p>
        </div>
      </div>
      <div class="nav">
        <ul>
          <li>ホストをはじめる</li>
          <li>ヘルプ</li>
          <li>登録する</li>
          <li>ログイン</li>
        </ul>
      </div>
    </header>
    <div class="top-content" id="top">
      <p class="fixed-bar">
          <i class="far fa-comment-dots fa-2x"></i>
          <span>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。
              アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。
          </span>
      </p>
      <div class="container">
        <h1>旅を贈ろう。</h1>
        <p>Airbnbギフトカードで、世界をぐんと身近に</p>
        <a href="#">ギフトカードを登録</a>
      </div>
    </div>
    <div class="main">
      <div class="container">
        <h1>いつも完璧な贈りもの</h2>
        <div class="menu">
          <div class="gift">
            <i class="far fa-envelope fa-3x"></i>
            <p>簡単に使える</p>
            <p>ギフトカードはメールで届きます。Airbnbア<br>カウントへのギフト登録も超かんたん。</p>
          </div>
          <div class="stopwatch">
            <i class="fas fa-stopwatch fa-3x"></i>
            <p>有効期限なし</p>
            <p>Airbnbギフトカードは無期限。だから友達も<br>時間をかけて旅をプランできます。</p>
          </div>
          <div class="globe">
            <i class="fas fa-globe fa-3x"></i>
            <p>忘れられない旅</p>
            <p>お家は100万件以上あるので、ずっと住みた<br>いと憧れていた街の暮らしも叶います。</p>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container">
        <div class="top-contents">
          <div class="airbnb">
              <p>Airbnb</p>
              <ul>
                <li><a href="#">採用情報</a></li>
                <li><a href="#">ニュース</a></li>
                <li><a href="#">ポリシー</a></li>
                <li><a href="#">ヘルプ</a></li>
                <li><a href="#">ダイバーシティ&ビロンギング</a></li>
                <li><a href="#">アクセシビリティ対応<span>新着</span></a></li>
                <li><a href="#">企業情報</a></li>
              </ul>
            </div>
          <div class="recommend">
            <p>スタッフのおすすめ</p>
            <ul>
              <li><a href="#">信頼&安全</a></li>
              <li><a href="#">お友達紹介クーポン</a></li>
              <li><a href="#">Airbnb Citizen</a></li>
              <li><a href="#">出張</a></li>
              <li><a href="#">アクティビティ<span>新着</span></a></li>
              <li><a href="#">Airbnbmag</a></li>
            </ul>
          </div>
          <div class="hosting">
            <p>ホスティング</p>
            <ul>
              <li><a href="#">ホストになる理由</a></li>
              <li><a href="#">おもてなしの心</a></li>
              <li><a href="#">ホストの責任</a></li>
              <li><a href="#">コミニュニティセンター</a></li>
              <li><a href="#">体験を掲載<span>新着</span></a></li>
              <li><a href="#">オープンホーム</a></li>
            </ul>
          </div>
          <div class="sns">
            <div class="logo">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>   
              <a href="#"><i class="fab fa-instagram"></i></a>  
            </div>
            <ul>
              <li><a href="#">利用規約</a></li>
              <li><a href="#">プライバシー</a></li>
              <li><a href="#">サイトマップ</a></li>
            </ul>
          </div>
        </div>
        <div class="bottom-contents">
          <div class="footer-left">
            <a href="#">Airbnb Grobal Services Limited</a> 
            <a href="#">観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a>
            <a href="#">© 2019 Airbnb, Inc. All rights reserved.</a>
          </div>
          <div class="footer-right">
            <div class="btn">日本語</div>
            <div class="btn">JPY-¥</div>
          </div>
        </div>
    </div>
    </footer>
  </body>
</html>

```ここに言語を入力
/*共通部分*/
a{
  text-decoration:none;
}
li{
  list-style:none;
}
body {
  margin: 0px;
}

/*ヘッダー*/
header{
  height:60px;
  padding:25px 20px 0  80px;
  display:flex;
  justify-content:space-between;
}
.search{
  width:458px;
  height:46px;
  border:1px solid #EBEBEB;
  box-shadow:0 2px 4px #EBEBEB;
}
.search .fas{
  padding:15px 0 15px 20px;
}
.search p{
  display:inline;
  color:#767676;
}
.nav ul{
  display:flex;
}
.nav li{
  margin-left:20px;
  color:#484848;
  font-size:14px;
  font-weight:bold;
}

/*固定されたバーがある所*/
#top {
  background-image:url(img1.jpg);
  background-size:contain;
  min-height:100vh;
}
.fixed-bar{
  position:fixed;
  z-index:16;
  margin-top:0;
  width:100%;
  font-size:14px;
  height:50px;
  padding-top:20px;
  background-color:#C2E4E6;
  color:#484848;
  text-align:center;
}
.fixed-bar .far{
  display:inline-block;
  margin-right:10px;
  vertical-align:middle;
}
.fixed-bar span{
  vertical-align:top;
}
.top-content h1{
  padding-top:220px;
  font-size:46px;
  font-weight:bold;
  color:#fff;
}
.top-content>.container>p{
  font-size:18px;
  color:#fff;
}
.top-content>.container>a{
  font-size:16px;
  color:#484848;
  background-color:#fff;
  padding:10px 20px;
  display:inline-block;
  border-radius:5px;
}
/*「いつも完璧なおくりものの所」*/
.main{
  padding-top:20px;
}
.menu{
  display:flex;
  justify-content:space-around;
}
.main h1{
  text-align:center;
}
.gift,.stopwatch,.globe{
  text-align:center;
}
.gift .far,.stopwatch .fas,.globe .fas{
  color:#307B87;
}
.gift>p:nth-child(2),.stopwatch>p:nth-child(2),.globe>p:nth-child(2){
  font-size:18px;
  color:#484848;
  font-weight:bold;
}
.gift>p:nth-child(3),.stopwatch>p:nth-child(3),.globe>p:nth-child(3){
  font-size:16px;
  color:#767676;
}

/*フッター*/
.container{
  max-width:1032px;
  margin:0 auto;
}
.top-contents{
  display:flex;
  border-bottom:1px solid #EBEBEB;
}
.top-contents ul{
  padding-left:0;
  font-size:14px;
}
.top-contents>.sns{
  padding-top:10px;
}
.airbnb{
  margin-right:80px;
}
.recommend,.hosting{
  margin-right:120px;
}

.airbnb>p,.recommend>p,.hosting>p{
  font-weight:bold;
}
.airbnb ul>p{
  display:inline-block;
}
.airbnb>ul>li>a,.recommend>ul>li>a,.hosting>ul>li>a{
  color:#767676;
  display:block;
}
.airbnb span,.recommend span,.hosting span{
  display:inline-block;
  padding:0 2px;
  border-radius:6px;
  background-color:#2A6A70;
  font-size:12px;
  color:#fff;
  margin-left:10px;
}
.sns a{
  color:#767676;
  margin-right:20px;
}
.sns li{
  color:#767676;
}
.bottom-contents{
  display:flex;
  justify-content:space-between;
  padding:20px 0 40px 0;
}
.footer-left{
  font-size:14px;
}
.footer-left a{
  display:block;
  color:#767676;
}
.footer-right{
  color:#767676;
  font-size:14px;
}
.footer-right .btn{
  display:inline-block;
  padding:7px;
  border:1px solid #F2F2F2;
  margin-top:10px;
  margin-left:10px;
}
.footer-right .btn:hover{
  background-color:#767676;
}


/*メディアクエリ*/
@media(max-width:559px){
  /*ヘッダー*/
  header{
    padding-left:10px;
  }
  header>.nav{
    display:none;
  }
  .fixed-bar{
   height:100px;
   
  }
   .fixed-bar span{
    
   }
  
  /*フッター*/
  .top-contents{
    display:none;
  }
}
```

レスポンシブデザインで背景画像をちゃんと表示したい

### 前提・実現したいこと
初めての投稿となります。jQuery初心者です。
jQueryを使って、格闘ゲームの体力ゲージのようなものを表したいと思っています。

0＿体力ゲージは「#box」で表現しています。CSSでwidthを100pxで設定。
1＿"#btn"をクリックすると"#box"の幅が20pxずつ縮小する。
2＿"#box"のwidthが残り40pxになるとゲージがCSSオレンジ色になる。
3＿"#box"のwidthが残り20pxになるとゲージがCSS赤色になる。
4＿"#box"のwidthが0pxになると画像（"./img/finish.jpg"）が現れる。

としたいです。
下のjQueryの部分にif文（widthが40pxであれば…）
を置いていけば良いのだと思っていますが、
具体的なコードが思いつかず困っています。
ご協力のほどどうぞ宜しくお願いします！


### 該当のソースコード

``````
■HTML

<div id="box"></div>
<img id="finish" src="./img/finish.jpg">

■CSS

#box{
　width:100px;
  background-color: yellow;
 }

■Javascript

$("#btn").on("click",function(){
    $("#box").width("-=20");
});
```

jQueryで色を変えたり、画像を表示したい！

画面の縦向きと横向きで読み込む処理を変えたいです
slickを用いたスライドショーです

```JavaScript
<script>
            $(function mq(){
                if(window.matchMedia('screen and (orientation:landscape)').matches){
                    $('.slide_1').slick({
                        arrows: false,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        slidesToShow: 4,	
                        dots: true,
                        pauseOnHover: false,
                        pauseOnDotsHover: false,
                        waitForAnimate: false,
                        swipe: false,
                    });
                    $('.slide_2').slick({
                        arrows: false,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        slidesToShow: 4,	
                        dots: true,
                        pauseOnHover: false,
                        pauseOnDotsHover: false,
                        waitForAnimate: false,
                        rtl: true,
                        swipe: false,
                    });
                    $('.slide_3').slick({
                        arrows: false,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        slidesToShow: 4,
                        dots: true,
                        pauseOnHover: false,
                        pauseOnDotsHover: false,
                        waitForAnimate: false,
                        swipe: false,
                    }); 
                }else{
                    $('.slide_1').slick({
                        arrows: false,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        slidesToShow: 3,	
                        dots: true,
                        pauseOnHover: false,
                        pauseOnDotsHover: false,
                        waitForAnimate: false,
                        swipe: false,
                    });
                    $('.slide_2').slick({
                        arrows: false,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        slidesToShow: 3,	
                        dots: true,
                        pauseOnHover: false,
                        pauseOnDotsHover: false,
                        waitForAnimate: false,
                        rtl: true,
                        swipe: false,
                    });
                    $('.slide_3').slick({
                        arrows: false,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        slidesToShow: 3,
                        dots: true,
                        pauseOnHover: false,
                        pauseOnDotsHover: false,
                        waitForAnimate: false,
                        swipe: false,
                    });
                }
                
               $(window).resize(mq);
            });
        </script>
```

向きを変えてからリロードすれば問題ないのですが、リロードしないと条件分岐後の処理が行われず以下のようなエラーになります

```ここに言語を入力
Uncaught TypeError: Cannot read property 'add' of null
    at Object.e.initADA (slick.min.js:1)
    at Object.e.init (slick.min.js:1)
    at new <anonymous> (slick.min.js:1)
    at k.fn.init.i.fn.slick (slick.min.js:1)
    at mq (gallery-1.html:59)
    at dispatch (jquery-3.4.1.min.js:2)
    at v.handle (jquery-3.4.1.min.js:2)
```

```HTML
<!doctype html>
<html lang="ja>">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <article class="gallery">
            <ul class="slide_1">
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(1).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(1).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(2).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(2).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(3).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(3).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(4).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(4).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(5).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(5).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(6).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(6).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(7).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(7).jpg"></a></li>
                <li><a href="pictures/photogaph1-min/Tanaka_img%20(8).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(8).jpg"></a></li>
            </ul>
        </article>
    </body>
</html>
```

画面の向きを変える度に、リロードなしで随時処理を読み込みたい

```ここに言語を入力

 <input name="Id" onchange="function()"> 
 <select name="SubId"><option></option>
 </select> 

```

```js
$(function() {
	$('input[name="Id"]').on('change',function(){
  var $Id = $('.Id');
  var original = $Id.html();

  $('.Id').change(function() {
    var val1 = $(this).val();

    $Id.html(original).find('option').each(function() {
      var val2 = $(this).data('val');
      if (val1 != val2) {
        $(this).not('optgroup,.msg').remove();
      }
    });

    if ($(this).val() === '') {
      $Id.attr('disabled', 'disabled');
    } else {
      $Id.removeAttr('disabled');
    }
  }
  });
});

```

inputタグで入力された値により、セレクトボックスの出力項目を変動させたいです。
inputタグで入力されたIDと一致するIDの部署をセレクトに連動して、セレクトボックスに出力したいですが、どのようにしたらいいでしょうか？
自分の書いたjsではconsole.log()をしても結果が表示されませんでした。
各部署は多数存在し、その中の一致した条件のみ出力、一致しなかった場合は出力しないセレクトボックスをつくりたいです。どのようなjsを書くのか教えていただきたいです。

inputタグとselectボックスの連動jsをつくりたい

タップで開閉するアコーディオンボタンを作りたいです。自分で考えて作ってみたのですが、以下のコードではタップすると一度開いた後閉じまた開いた後閉じるような動きになってしまいます。タップで開いてタップで閉じるようにするにはどうすればよいでしょうか。


```html
<div class="contents">
<div class="title">アコーディオンのラベルの内容</div>  
<div class="hide">隠す部分の内容</div></div>
```
```jQuery
$(function(){
$('.hide').hide();
$('.contents').click(function(){
var $hide = $(this).find('.hide');
if($hide.hasClass('open')){
$hide.removeClass('open');
$hide.slideUp();}
else{$hide.addClass('open');
$hide.slideDown();}
});
});
```

```css
.open{
display:block;
}
```

jQueryのアコーディオンができない

### 前提・実現したいこと

ハンバーガーメニュー内のリンクをクリックとすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままになってしまいます。


### 該当のソースコード
```ここに言語を入力
（html）
<div>
		<nav class="navigation">
			<ul class="nav-list l-horizon">
				<li class="nav-item a"><a href="#rice" onclick='_scrollTo("#rice")'>メニュー１</a></li>
				<li class="nav-item a"><a href="#line-up" onclick='_scrollTo("#line-up")'> メニュー２</a></li>
				<li class="nav-item a"><a href="#customer" onclick='_scrollTo("#customer")'>メニュー３</a></li>
				<li class="nav-item a"><a href="#contact" onclick='_scrollTo("#contact")'>Contact</a></li>
				<li class="nav-item a"><a href="https://www.instagram.com/">Instagram</a></li>		
		</nav>
	</div>
		<button class="btn-trigger">
            <svg viewBox="0 0 44 44" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="menuButtonTitle">
                <title id="menuButtonTitle">Menu</title>
                <symbol id="bar">
                <rect width="28" height="1" fill="#a0a0a0"></rect>
                </symbol>
                <use xlink:href="#bar" x="8" y="14"></use>
                <use xlink:href="#bar" x="8" y="24"></use>
                <use xlink:href="#bar" x="8" y="34"></use>
            </svg>
            toggle menu
        </button>

```


```ここに言語名を入力
（css）
	.btn-trigger{
		display: none;
	}
	.navigation{
		background: none;
    	position: absolute;
    	top: 890px;
		display: flex;
		width: 100%;
    	height: 10px;
		padding: 10px 0 10px;
		
	}
	.nav-list{
		display: flex;
		margin: 0 auto;
		
	}
	.nav-item{
		margin-left: 20px;
		
	}
	.nav-item>a{
		color: #2D2C2C;
		font-family: 'Yu Gothic',sans-serif;
		font-size: 18px;
		text-transform: none;
		
	}
	.a {
  		position: relative;
  		display: inline-block;
  		text-decoration: none;
	}
	.a::after {
  		position: absolute;
  		bottom: -25px;
  		left: 0px;
  		content: '';
  		width: 100%;
  		height: 1px;
  		background: #ef3f98;
  		transform: scale(0, 1);
  		transform-origin: center top;
  		transition: transform .3s;
	}
	.a:hover::after {
  		transform: scale(1, 1);
}
```

```
(js)
$(".btn-trigger").on("touchstart",function(){
	$(this).toggleClass("ac");
	if ($(".navigation").hasClass("")){
		$(".navigation").removeClass("open").fadeOut(500);
		
	} else {
		$(".navigation").addClass("open").fadeToggle(500);
	}
});
 });
```


### 試したこと
removeClassを付け足しましたが、メニューが消えません。

### 補足情報（FW/ツールのバージョンなど）

ハンバーガーメニューについて

[https://digipress.info/tech/page-transition-effect-how-to/](https://digipress.info/tech/page-transition-effect-how-to/)

上記サイトを参考に、ページ遷移時にフェードイン・アウトを実装しました。
しかし、firefoxでブラウザの戻るで前ページに戻ると真っ白いままになっています。

```ここに言語を入力
$(function() {
  // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault(); // ナビゲートをキャンセル
    url = $(this).attr('href'); // 遷移先のURLを取得
    if (url !== '') {
      $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
      setTimeout(function(){
        window.location = url;  // 0.8秒後に取得したURLに遷移
      }, 800);
    }
    return false;
  });
});

```
下記の部分がfirefoxだブラウザバックと実行されません。
```ここに言語を入力
$('body').addClass('fadeout');
```

どなたかご教授ください。

ページ遷移時にフェードイン・アウト

javascript jQuery teratail初心者です。よろしくお願い致します。

webサイトを開くと、fadeInしながらサイトを表示させるといった単純なものを作っています。

画像をたくさん張り付けているサイトを想定して作っていまして、
全てが揃ってから表示できるかを見るために
容量の重い画像から軽い画像を30枚くらい表示させています。
重い画像は、あるサイトの航空写真で40M ぐらいの画像を
30枚のうち半分くらい使っています。

jquery, javascript を使い自分なりに調べながら作っていたところ、
chrome では問題なく表現できているのですが、

firefox, edge, IE(11)では、fadeInしながらパラパラと表示していき、
自分が思い描いている全ての画像が同時にfadeInするといった具合になりません。

いくら調べても分かりません。
こういうものだと納得しなければならないのか、
それとも別の方法があるのか、
コード自体まちがっているのか・・・。

どうかお力添えのほう、よろしくお願いいたします。

---
説明不足と気づいたことがあって質問したいので追記します。

ローディングを作ろうとしています。
「コンテンツ部分を隠しておく」→「ローディング表示」→「コンテンツ表示」の
「ローディング」の部分は後で作るとして、
すべてが読み込まれたらfadeIn して表示させる部分を作ってみました。

現在 各画像をload イベントでとって、読み込み完了したらカウント重ね、
揃ったら親要素をfadeIn させ表示するまではできているのではないかと思っています。

そこで気づいたのが、上記の方にも書きましたが、
chrome以外のブラウザだけ重い画像がパラパラと遅れて表示していることに。
ブラウザによって全てが揃った状態で表示してくれません。
全てが揃っているというのは確実に表示した状態でという意味です。

自分のなかでは、
読み込み完了 = 表示も完了。
だと思っていたので今のような表示の仕方が納得できないのです。
表示を揃えることってできないのか？と思い質問しました。
ここまで重い画像を載せることはしませんし、
軽い画像では現象が見られないためいいかとは思うのですが
軽い画像でも本当の意味では揃ってないのですよね・・・。


あとこれを書いている最中に疑問に思ったことがあったため
申し訳ないのですが質問させていただきます。
今回と関係あるのかもしれません。
よそ様のサイトを見ているときに回線のせいもあるかもしれませんが、
画像が徐々に表示されている状態は
読み込んでいる最中なのか、読み込み完了はしている状態なのか？？？
今回の場合ですと、loadイベントの中に入ったのか入っていないのか？？？
これが分かると読み込み完了の意味が少し理解できるのかな・・・

どうかよろしくお願いします。








---
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style>
        .gallery {
            display: none;
        }

        .gallery .container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 1000px;
            margin: 0 auto;
            background-color: #ebb7b7;
        }

        .gallery .container .im {
            display: inline-block;
            flex: 1 1 300px;
            max-width: 300px;
        }
    </style>
<body>
    <div class="gallery">
        <div class="container">
            <img src="../images/bg00.jpg" alt="" class="im">
	　　<img src="../images/bg01.jpg" alt="" class="im">
	　　<img src="../images/bg02.jpg" alt="" class="im">
	　　<img src="../images/bg03.jpg" alt="" class="im">
	　　<img src="../images/bg04.jpg" alt="" class="im">
	　　<img src="../images/bg05.jpg" alt="" class="im">
	　　<img src="../images/bg06.jpg" alt="" class="im">
	　　<img src="../images/bg07.jpg" alt="" class="im">
	　　<img src="../images/bg08.jpg" alt="" class="im">
	　　<img src="../images/bg09.jpg" alt="" class="im">
	　　<img src="../images/bg10.jpg" alt="" class="im">
	　　<img src="../images/bg11.jpg" alt="" class="im">
	　　<img src="../images/bg12.jpg" alt="" class="im">
	　　<img src="../images/bg13.jpg" alt="" class="im">
	　　<img src="../images/bg14.jpg" alt="" class="im">
	　　<img src="../images/bg15.jpg" alt="" class="im">
	　　<img src="../images/bg16.jpg" alt="" class="im">
	　　<img src="../images/bg17.jpg" alt="" class="im">
	　　<img src="../images/bg18.jpg" alt="" class="im">
	　　<img src="../images/bg19.jpg" alt="" class="im">
	　　<img src="../images/bg20.jpg" alt="" class="im">
	　　<img src="../images/bg21.jpg" alt="" class="im">
	　　<img src="../images/bg22.jpg" alt="" class="im">
	　　<img src="../images/bg23.jpg" alt="" class="im">
	　　<img src="../images/bg24.jpg" alt="" class="im">
	　　<img src="../images/bg25.jpg" alt="" class="im">
	　　<img src="../images/bg26.jpg" alt="" class="im">
	　　<img src="../images/bg27.jpg" alt="" class="im">
	　　<img src="../images/bg28.jpg" alt="" class="im">
	　　<img src="../images/bg29.jpg" alt="" class="im">
	　　<img src="../images/bg30.jpg" alt="" class="im">
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var img = document.querySelectorAll('.im');
        var loadCount = 0;
        var imgLength = img.length;
        for (var i = 0; i < img.length; i++) {

            var image = new Image();
            image.src = img[i].src;
            img[i].src = '';

            img[i].addEventListener('load', function (e) {
                loadCount++;
                if (loadCount === imgLength) {
                    $('.gallery').fadeIn(1500);
                }
            }, false);
            img[i].src = image.src;
        }

    </script>
</body>
</html>
```

jQueryのfadeInで読み込んだ画像を同時に表示させたい。

四角で囲った文字が何故か縦に並んでしまいました。
横にしようとheightなどを動かしてみましたが、うまくいきません。
宜しくお願いします。
```
<!DOCTYPE html>
<html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ちづみ2</title>
  <link rel="stylesheet" href="chizumi2.css" />
  <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″> </head>
<body>
  <div class="header">
    <div class="container">
      <div class="logo"> <img src="CAT.svg" alt="" width=49px height=24px></div>
      <div class="header-left">
        <ul>
          <li>cat1</li>
          <li>cat2</li>
          <li>cat3</li>
        </ul>
      </div>
      <div class="bg_test-text"><img src="header.png">
        <div class="logo2"><img src="CAT.svg" alt="" width=292px height=144px> </div>
      </div>
    </div>
  </div>
  <div class="top-wrapper">
    <div class="section-title">吾輩は猫である。名前はまだ無い。</div>
    <div class="contents-item">
      <p>どこで生れたか頓と見當がつかぬ。<br> 何でも薄暗いじめじめした所で<br> ニヤーニヤー泣いて居た事丈は記憶して居る。<br> 吾輩はこゝで始めて人間といふものを見た。</p>
    </div>
    <div class="contents-item">
      <p>然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。<br> 此書生といふのは時々我々を捕へて煮て食ふといふ話である。</p>
    </div>
    <div class="contents-item">
      <p> 然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。<br> 但彼の掌に載せられてスーと持ち上げられた時<br> 何だかフハフハした感じが有つた許りである。</p>
    </div>
  </div>
  <div class="top-wrapper2">
    <div class="section-title2">CAT1</div>
    <div class="contents-item2"><img src="マスクグループ 1.png" alt=" " align="left" style="margin-right:79px">
      <p>掌の上で少し落ち付いて書生の顔を見たのが所謂<br>人間といふものゝ見始であらう。此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て<br>装飾されべき筈の顔がつるつるして丸で薬罐だ。<br>其後猫にも大分逢つたがこんな片輪には一度も出<br>會はした事がない。加之顔の眞中が餘りに突起し<br>て居る。</p>
    </div>
    <div class="contents-item3"><img src="マスクグループ 2.png" alt=" " align="right" style="margin-left:79px">
      <p>そうして其穴の中から時々ぷうぷうと烟を吹く。<br>どうも咽せぽくて實に弱つた。是が人間の飲む烟<br>草といふものである事は漸く此頃知つた。此書生<br>の掌の裏でしばらくはよい心持に坐つて居つた<br>が、暫くすると非常な速力で運轉し始めた。書生<br>が動くのか自分丈が動くのか分らないが無暗に眼<br>が廻る。胸が惡くなる。</p>
    </div>
    <div class="contents-item4"><img src="マスクグループ 3.png" alt=" " align="left" style="margin-right:79px">
      <p>到底助からないと思つて居ると、どさりと音がし<br>て眼から火が出た。夫迄は記憶して居るがあとは<br>何の事やらいくら考へ出さうとしても分らない。<br>ふと氣が付いて見ると書生は居ない。澤山居つた<br>兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して<br>仕舞つた。其上今迄の所とは違つて無暗に明る<br>い。眼を明いて居られぬ位だ。</p>
    </div>
  </div>
  <div class="top-wrapper3">
    <div class="section-title3"> CAT2 </div>
    <div class="contents-item5">
      
      <div class="column1"> <img src="photo-1511275539165-cc46b1ee89bf.png" alt="画像">
        <p>果てな何でも容子が可笑いと、のそのそ這ひ出し<br>て見ると非常に痛い。吾輩は藁の上から急に笹原<br>の中へ棄てられたのである。 </p>
      </div>
      
      <div class="column2"></div>
      
      <div class="column3"> <img src="photo-1511694009171-3cdddf4484ff.png" alt="画像">
        <p>漸くの思ひで笹原を這ひ出すと向ふに大きな池が<br>ある。吾輩は池の前に坐つてどうしたらよからう<br>と考へて見た。別に是といふ分別も出ない。 </p>
      </div>
    </div>
  </div>
  <div class="top-wrapper4">
    <div class="neko-photo"> <img src="グループ化 12.png" alt="画像">
      <div class="box">
        <p>ニヤー、ニヤーと試みにやつて見たが誰も來な<br>い。其内池の上をさらさらと風が渡つて日が暮れ<br>かゝる。腹が非常に減つて來た。<br> 泣き度くても聲が出ない。仕方がない、何でもよ<br>いから食物のある所迄あるかうと決心をしてそろ<br>りそろりと池を左りに廻り始めた。<br> どうも非常に苦しい。そこを我慢して無理やりに<br>這つて行くと漸くの事で何となく人間臭い所へ出<br>た。<br> 此所へ這入つたら、どうにかなると思つて竹垣の<br>崩れた穴から、とある邸内にもぐり込んだ。</p>
      </div>
    </div>
  </div>
    <div class="top-wrapper4">
    <div class="section-title4">CAT3
    </div>
    <div class="comment1">
    <div class="border1"></div>
    <div class="comment1-1">
    <h4 style="display:inline;">2018.02.09</h4><span style="background:#fcfcff; padding:12.5px 42px; border:1px solid red; color:red; border-radius:1px; word-break:break-all;" >新着</span><p style="display:inline;">縁は不思議なもので、もし此竹垣が破れて居なかつたなら、</p>
    </div>
   </div>
   <div class="comment2">
   <div class="border2"></div>
   <div class="comment2-1">
     <h4 style="display:inline;">
     2018.02.09</h4><span style="background:#fcfcff; padding:12.5px 42px; border:1px solid red; color:red; border-radius:1px; word-break:break-all;" >新着</span><p style="display:inline;">吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。</p>
  </div>
</div>
<div class="comment3">
<div class="border3"></div>
<div class="comment3-1">
  <h4 style="display:inline;">
  2018.02.09</h4><span style="background:#fcfcff; padding:12.5px 42px; border:1px solid red; color:red; border-radius:1px; word-break:break-all;" >新着</span><p style="display:inline;">此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。</p>
</div>
</div>
<div class="comment4">
<div class="border4"></div>
<div class="comment4-1">
  <h4 style="display:inline;">
  2018.02.09</h4><span style="background:#fcfcff; padding:12.5px 42px; border:1px solid red; color:red; border-radius:1px; word-break:break-all;" >新着</span><p style="display:inline;">偖邸へは忍び込んだものゝ</p>
</div>
</div>
<div class="comment5">
<div class="border5"></div>
<div class="comment5-1" style="display: flex;">
        <h4> 2018.02.09</h4><span style="background:#fcfcff; padding:12.5px 42px; border:1px solid red; color:red; border-radius:1px; word-break:break-all;">新着</span>
          <div>是から先どうして善いか分らない。其内に暗くなる、腹は減る、寒さは寒し、雨が降つて來るといふ始末でもう一刻も猶豫が出來なくなつた。</div>
    </div>
</div>
</div>
</body>
</html>
```
```

.contents-item2 {
  margin: 0px 250px;
  width: 979px;
  height: 300px;
}

.contents-item3 {
  margin: 100px 250px;
  width: 979px;
  height: 300px;
}

.contents-item4 {
  margin: 100px 250px;
  width: 979px;
  height: 300px;
}

.top-wrapper3 {
  height: 882.5px;
  width: 1480px;
}

.section-title3 {
  padding: 100px 688px;
  color: #333333;
  font-size: 40px
}

.contents-item5 {
  margin: 0px 250px 79px;
  display: flex;
}

.column1, .column3 {
  flex-basis: 50%;
  font-size: 20px;
}

.column2 {
  width: 30px;
  /*(1)*/
}

.top-wrapper4 {
  width: 1480px;
  height: 950px;
}

.neko-photo {
  position: relative;
}

.box {
  position: absolute;
  top: 101px;
  left: 629px;
  background-color: #FFFFFF;
  opacity: 0.5;
  width: 600px;
  height: 600px;
}

.box p {
  color: black;
  font-size: 20px;
  padding: 98px 75px 52px 75px;
}

.section-title4{
  margin-top:100px;
  text-align:center;
  font-size:40px;
  margin-bottom:95.5px
}
.comment1{
  font-family:bold;
  margin:0px 251px 12.5px;
  }
.border1{
    border-top: 1px solid ;   width:979.5px; height:13.5px;}
.comment1 h4{font-size:16px; padding-right:14px;}
.comment1 p{
  padding-left:37px;}

.comment2{
  margin:0px 251px 12.5px;}
.comment2 h4{font-size:16px; padding-right:14px;}
.comment2 p{
  padding-left:37px;}
.border2{
  border-top: 1px solid ;    width:979.5px;
  height:13.5px;}

  .comment3{
    margin:0px 251px 12.5px;}
  .comment3 h4{
  font-size:16px;
  padding-right:14px;}
  .comment3 p{
  padding-left:37px;
  }
  .border3{
    border-top: 1px solid ;    width:979.5px;
    height:13.5px;}

    .comment4{
      margin:0px 251px 12.5px;}
    .comment4 h4{
    font-size:16px;
    padding-right:14px;}
    .comment4 p{
    padding-left:37px;
    }
    .border4{
      border-top: 1px solid ;    width:979.5px;
      height:13.5px;}

      .comment5{
      margin:0px 251px 12.5px;}
      .comment5 h4{
      font-size:16px;
      padding-right:14px;}
      .comment5 p{
      padding-left:36px;
      }
      .border5{
        border-top: 1px solid ;    width:979.5px;
        height:13.5px;
      }
```
![![イメージ説明](99851a9c1ce8a35ca01c24ba8064fb2b.png)](733f2cd725ed30a145600ebf2311628c.png)

縦に並んでしまった文字を横にしたい

check_boxを選択しかできず、選択解除ができません。

複数選択はできるのですが、選択の取り消しができません。
（選択したものをもう一回押すと選択解除される、という操作です。）

![イメージ説明](a1afddedcb778698a16ed5bd1c406169.png)
↑walkをもう一回押しても、変化がない

いろいろ試しましたがわかりません！どなたか分かる方いらっしゃいませんか。
```html
<div class="container">
  <div class="checkbox-tile-group">
    <div class="input-container">
      <input id="walk" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon walk-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/>
          </svg>
        </div>
        <label for="walk" class="checkbox-tile-label">Walk</label>
      </div>
    </div>

    <div class="input-container">
      <input id="bike" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon bike-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>
          </svg>
        </div>
        <label for="bike" class="checkbox-tile-label">Bike</label>
      </div>
    </div>

    <div class="input-container">
      <input id="drive" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon car-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </div>
        <label for="drive" class="checkbox-tile-label">Drive</label>
      </div>
    </div>

    <div class="input-container">
      <input id="fly" class="checkbox-button" type="checkbox" name="checkbox" />
      <div class="checkbox-tile">
        <div class="icon fly-icon">
          <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.18 9"/>
            <path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </div>
        <label for="fly" class="checkbox-tile-label">Fly</label>
      </div>
    </div>
  </div>
</div>

```

```scss
* {
  box-sizing: border-box;
  font-family: 'Helvetica Neue', sans-serif;
}

body {
  background-color: black;
}

$primary-color: #079ad9;

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.checkbox-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  //set dimensions for invisible container
  .input-container {
    position: relative;
    height:  7rem;
    width:  7rem;
    margin: 0.5rem;

    //make actual checkbox input invisible
    // + stretch to fill container
    .checkbox-button {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      cursor: pointer;
    }

    //default tile styles
    .checkbox-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border: 2px solid $primary-color;
      border-radius: 5px;
      padding: 1rem;
      transition: transform 300ms ease;
    }
    .icon svg {
      fill: $primary-color;
      width: 3rem;
      height: 3rem;
    }
    .checkbox-tile-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: $primary-color;
    }

    //active tile styles
    .checkbox-button:checked + .checkbox-tile {
      background-color: $primary-color;
      border: 2px solid $primary-color;
      color: white;
      transform: scale(1.1, 1.1);
      
      .icon svg {
        fill: white;
        background-color: $primary-color;
      }
      .checkbox-tile-label {
        color: white;
        background-color: $primary-color;
      }
    }
  }
}
```

check_boxを選択しかできない、選択解除できない

### 前提・実現したいこと

window.getSelection()が返すSelection(もしくは、
window.getSelection().getRangeAt(0)が返すRange)について、
選択位置を返すプロパティがもし存在するならば、ご教授頂きたいです。
選択位置と表現しているのは、pxで表現されるような位置ではなく、
テキストの何文字目かを示す位置(下に示す例のいずれか)です。
(例)id=〇〇のdivタグ内テキストの45文字目
(例)id=〇〇のdivタグ内テキストの5行目,6文字目

最終目標は
例えばcontenteditableに
C|G|Am|Em<br>
|F|C|F|G|
のようなコード進行が表示されていて、
2行目最初のFをクリックした場合
グローバル変数:現在再生位置を5(番目のコード)に設定した上で
Fのコードを再生することです。

### 発生している問題・エラーメッセージ
### 該当のソースコード

<script>
    window.onload = function () {
        var test = document.getElementById("test")
        var range = document.createRange();
        range.setStart(test.childNodes[8], 10);
        range.setEnd(test.childNodes[8], 15);
        window.getSelection().addRange(range);
        var watch = window.getSelection().getRangeAt(0);
        var breakpoint = 'here';
    }
</script>
<div contenteditable=true id='test'>
    1234567890<br>
    1234567890<br>
    1234567890<br>
    1234567890<br>
    1234567890<br>
    1234567890<br>
    1234567890<br>
    1234567890
</div>

### 試したこと

watchでwindow.getSelection().getRangeAt(0)のプロパティを眺めたものの、
選択位置を示すそれらしいプロパティが見つかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

Google Chrome
バージョン: 74.0.3729.131（Official Build） （64 ビット）

Javascriptでの選択位置(※文字数)の取得

### 前提・実現したいこと
CentOS7のCUI上で、コピペ（Ctrl + V)をできるようにしたいです。

### 発生している問題・エラーメッセージ
Ctrl + Vをすると、以下のようになってしまう。
![イメージ説明](85da2f4994ab3bf2f71e110c37bb7e84.png)

### 試したこと
VirtualBoxマネージャーにおいて、

設定→一般→双方向　に設定
![イメージ説明](fbabbca026e4e6d6a71c0bf35ca7df79.png)

しかし、効果なし

### 補足情報（FW/ツールのバージョンなど）

実行環境
Windows 10
Virtual Box 6.06
CentOS7.6

（追記）
Windows10上に、VirtualBOXを立ち上げ、CentOS7を起動しています。

CentOS7のCUI上でコピペしたい

お世話になります。javascript初心者です。
現在、jqueryで書いた物を、勉強のためjavascriptで書いているところです。

### やりたいこと
・javascriptでアコーディオンを実装したい
・その際、アコーディオンは複数あるので、idではなく該当classをクリックしたら、
その隣の要素を出現させたい。
・最終的には要素の出し方はslidedown/upさせたいが、
そもそもトリガーをクリックしてもalert処理さえ実装できていないので、
まずはalertを出したい。

### 参考サイト
[https://memocarilog.info/jquery/7300](https://memocarilog.info/jquery/7300)
→こちらのサイトの通りidで作成すると、「cloneNode」のエラーはでず、きちんと動きます。
ただし今回のようにclassで処理をすると「cloneNode」のエラーが発生してしまい
それ以降の処理が動きません。

###HTML
```html
      <ul class="c-header-gnavi__list">
        <li class="c-header-gnavi__item js-accordion-box">
          <span class="c-header-gnavi__link js-accordion-trigger"><span class="c-header-gnavi__link-inner">アコーディオントリガー</span></span>
          <ul class="sp js-accordion-items">
            <li class="c-mega-navi__item"><a href="">アコーディオン子要素1</a></li>
            <li class="c-mega-navi__item"><a href="">アコーディオン子要素2</a></li>
            <li class="c-mega-navi__item"><a href="">アコーディオン子要素3</a></li>
          </ul>
        </li>
        <li class="c-header-gnavi__item">
        <span class="c-header-gnavi__link js-accordion-trigger"><span class="c-header-gnavi__link-inner">アコーディオントリガー2</span></span>
        <ul class="sp js-accordion-items">
            <li class="c-mega-navi__item"><a href="">アコーディオン子要素素1</a></li>
            <li class="c-mega-navi__item"><a href="">アコーディオン子要素2</a></li>
            <li class="c-mega-navi__item"><a href="">アコーディオン子要素3</a></li>
          </ul>
      </li>
     </ul>
```

### javascript(エラーがでる)
※一旦スライドダウン・アップの処理は置いておいて、まずは('.js-accordion-trigger')をクリックしたらアラートが出るようにしたいです。(ただし、最終的にはクリックしたら、スライドダウン+アップ処理をする前提で記述したいです)
```javascript
window.onload = function() {
  const accrodionTrigger = document.getElementsByClassName('js-accordion-trigger');
  const accrodionItems = document.getElementsByClassName('js-accordion-items');
  
　for (let i = 0;i < accrodionTrigger.length;i++) {
    const accrodionItemsCopy = accrodionTrigger.nextElementSibling.cloneNode(true);
    accrodionItems.parentNode.appendChild(accrodionItemsCopy);
    const accrodionItemsCopyH = accrodionItemsCopy.offsetHeight;
    accrodionTrigger[i].addEventListener('click',() => {
      alert(accrodionItemsCopyH);
    });
  }
}
```

### 試したこと
①cloneNodeのタイミングや、書き方を変えてみました。
例えば、

`const accrodionItemsCopy = this.nextElementSibling.cloneNode(true);
`
→`const accrodionItemsCopy = accrodionTrigger.cloneNode(true);`

②for文の外に書いてみる。


### エラー内容
Cannot read property 'cloneNode' of undefined　at window.onload

引き続き調べを進めますが、
何かヒントなどいただければ嬉しいです。