回答編集履歴

3 修正

spookybird

spookybird score 1707

2018/09/14 12:35  投稿

PCのChromeでスマホサイズの表示にしたときにこういうエラーが出ています。
```console
flipsnap.min.js:1 Uncaught Error: element not found
   at Flipsnap.init (flipsnap.min.js:1)
   at new Flipsnap (flipsnap.min.js:1)
   at Flipsnap (flipsnap.min.js:1)
   at Object.initPortfolio (base.js:131)
   at base.js:170
```
`Uncaught Error: element not found`ですから、スマホ表示に切り替わった際、なんらかの必須要素が存在しなくなってしまっているのでしょう。
で、エラーを出しているのは`flipsnap`です。
たぶんどこかに`Flipsnap('セレクタ');`みたいな記述をしているはずです。
セレクタで指定している要素が常に存在するか確認してみてください。
### 追記
軽く解析しました。
```js
initPortfolio: function () {
 if (!this.isSpView) {
   this.flipsnap = undefined;
   $('.about_gallery').width((this.windowWidth + 1) + 'px');
   $('.about_gallery > img').css({width: '20%'});
   return; // スマホ表示でなければここで return している
 }
 var _this = this;
 var total = this.windowWidth * $('.about_gallery > img').length;
 $('.about_gallery').width(total);
 $('.about_gallery > img').width(this.windowWidth);
 this.flipsnap = Flipsnap('.about_gallery'); // スマホ表示だとここにくる
// 後略
```
んで、`about_gallery`なんていうclassを持った要素はどこにも存在しないようですね。
`initPortfolio`って関数名からして、これどっかのフリーランサーかデザイナかなんかのポートフォリオサイトを丸コピしてきた感じですかね。
### 追記2
解決済みですが追記します。
`<span id="btn-nav__sp" class="menu-trigger"></span>`
JSの方で書いてる`id`が間違ってるだけだと思いますよ。
`btn-nav--sp`ではなく`btn-nav__sp`です。
JSの方で書いてるセレクタが間違ってるだけだと思いますよ。
`.btn-nav--sp`ではなく`#btn-nav__sp`です。
2 追記

spookybird

spookybird score 1707

2018/09/14 12:34  投稿

PCのChromeでスマホサイズの表示にしたときにこういうエラーが出ています。
```console
flipsnap.min.js:1 Uncaught Error: element not found
   at Flipsnap.init (flipsnap.min.js:1)
   at new Flipsnap (flipsnap.min.js:1)
   at Flipsnap (flipsnap.min.js:1)
   at Object.initPortfolio (base.js:131)
   at base.js:170
```
`Uncaught Error: element not found`ですから、スマホ表示に切り替わった際、なんらかの必須要素が存在しなくなってしまっているのでしょう。
で、エラーを出しているのは`flipsnap`です。
たぶんどこかに`Flipsnap('セレクタ');`みたいな記述をしているはずです。
セレクタで指定している要素が常に存在するか確認してみてください。
### 追記
軽く解析しました。
```js
initPortfolio: function () {
 if (!this.isSpView) {
   this.flipsnap = undefined;
   $('.about_gallery').width((this.windowWidth + 1) + 'px');
   $('.about_gallery > img').css({width: '20%'});
   return; // スマホ表示でなければここで return している
 }
 var _this = this;
 var total = this.windowWidth * $('.about_gallery > img').length;
 $('.about_gallery').width(total);
 $('.about_gallery > img').width(this.windowWidth);
 this.flipsnap = Flipsnap('.about_gallery'); // スマホ表示だとここにくる
// 後略
```
んで、`about_gallery`なんていうclassを持った要素はどこにも存在しないようですね。
`initPortfolio`って関数名からして、これどっかのフリーランサーかデザイナかなんかのポートフォリオサイトを丸コピしてきた感じですかね。
`initPortfolio`って関数名からして、これどっかのフリーランサーかデザイナかなんかのポートフォリオサイトを丸コピしてきた感じですかね。
### 追記2
解決済みですが追記します。
`<span id="btn-nav__sp" class="menu-trigger"></span>`
JSの方で書いてる`id`が間違ってるだけだと思いますよ。
`btn-nav--sp`ではなく`btn-nav__sp`です。
1 原因を追記

spookybird

spookybird score 1707

2018/09/14 10:45  投稿

PCのChromeでスマホサイズの表示にしたときにこういうエラーが出ています。
```console
flipsnap.min.js:1 Uncaught Error: element not found
   at Flipsnap.init (flipsnap.min.js:1)
   at new Flipsnap (flipsnap.min.js:1)
   at Flipsnap (flipsnap.min.js:1)
   at Object.initPortfolio (base.js:131)
   at base.js:170
```
`Uncaught Error: element not found`ですから、スマホ表示に切り替わった際、なんらかの必須要素が存在しなくなってしまっているのでしょう。
で、エラーを出しているのは`flipsnap`です。
たぶんどこかに`Flipsnap('セレクタ');`みたいな記述をしているはずです。
セレクタで指定している要素が常に存在するか確認してみてください。
セレクタで指定している要素が常に存在するか確認してみてください。
### 追記
軽く解析しました。
```js
initPortfolio: function () {
 if (!this.isSpView) {
   this.flipsnap = undefined;
   $('.about_gallery').width((this.windowWidth + 1) + 'px');
   $('.about_gallery > img').css({width: '20%'});
   return; // スマホ表示でなければここで return している
 }
 var _this = this;
 var total = this.windowWidth * $('.about_gallery > img').length;
 $('.about_gallery').width(total);
 $('.about_gallery > img').width(this.windowWidth);
 this.flipsnap = Flipsnap('.about_gallery'); // スマホ表示だとここにくる
// 後略
```
んで、`about_gallery`なんていうclassを持った要素はどこにも存在しないようですね。
`initPortfolio`って関数名からして、これどっかのフリーランサーかデザイナかなんかのポートフォリオサイトを丸コピしてきた感じですかね。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る