質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

解決済

1回答

1030閲覧

Safariでのみ表示されるSyntaxErrorが見つからない

meli

総合スコア312

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2020/08/17 06:00

お世話になっております。
agecheck.jsというJqueryを使用しているのですが、
Safariで確認したときのみ動作しません。

safariの開発者ツールには以下のエラーが出ます。(CHromeではエラーは出ません)

error

1jquery.agecheck.js:57 2SyntaxError: Expected an identifier but found '(' instead 3age.js:7 4TypeError: 'undefined' is not a function (evaluating '$.ageCheck')

該当のコードは以下なのですが、JShintで検証してもエラーはありませんでした。
Syntaxエラーのほかに何か原因があるのかどうかどなたかご教示いただきたいです。

js

1(function ($) { 2 $.ageCheck = function (options) { 3 const settings = $.extend({ 4 minAge: 21, 5 redirectTo: '', 6 redirectOnFail: '', 7 success: null, 8 successMsg: { 9 header: '<div id="loading"> <div class="bkimg"><img src="http://XXX/loading.png"></div> <div class="spinner"><img src="http://XXX/test.png"></div></div>', 10 body: '' 11 }, 12 underAgeMsg: '年齢確認が出来ませんでした。', 13 underAge: null, 14 errorMsg: { 15 invalidDay: '有効な日付をご入力ください' 16 }, 17 storage: 'sessionStorage', 18 storageExpires: null, 19 }, options); 20 21 var storage = window[settings.storage]; 22 23 const _this = { 24 month: '', 25 day: '', 26 year: '', 27 age: '', 28 errors: [], 29 setValues() {57行目 30 const month = $('.ac-container .month').val(); 31 const day = $('.ac-container .days').val(); 32 _this.month = month; 33 _this.days = day.replace(/^0+/, ''); // remove leading zero 34 _this.year = $('.ac-container .year').val(); 35 }, 36 validate() { 37 _this.errors = []; 38 if (!(/^([0-9]|[12]\d|3[0-1])$/.test(_this.days))||!(/^(19|20)\d{2}$/.test(_this.year))||!(/^(0[1-9]|[1-9]|1[0-2])$/.test(_this.month))) { 39 _this.errors.push(settings.errorMsg.invalidDay); 40 } 41 42 _this.clearErrors(); 43 _this.displayErrors(); 44 return _this.errors.length < 1; 45 }, 46 clearErrors() { 47 $('.errors').html(''); 48 }, 49 displayErrors() { 50 let html = '<ul>'; 51 for (let i = 0; i < _this.errors.length; i++) { 52 html += `<li><span>x</span>${_this.errors[i]}</li>`; 53 } 54 html += '</ul>'; 55 setTimeout(() => { 56 $('.ac-container .errors').html(html); 57 }, 200); 58 }, 59 reCenter(b) { 60 b.css('top', `${Math.max(0, (($(window).height() - (b.outerHeight() + 150)) / 2))}px`); 61 b.css('left', `${Math.max(0, (($(window).width() - b.outerWidth()) / 2))}px`); 62 }, 63 64 65 buildHtml() { 66 const copy = settings.copy; 67 let html = ''; 68 html += '<div class="ac-overlay"></div>'; 69 html += '<div class="ac-container">'; 70 html += `<img class="ageCheckImg" src="http://mixintl-stg.kir.jp/20200731_ez/test/img/top/agecheck.png" width="70%">`; 71 html += `<div class="subtitle">${settings.subtitle}</div>`; 72 html += `<h2>${settings.title}</h2>`; 73 html += `<p>${copy.replace('[21]', `<strong >${settings.minAge}</strong>`)}` + '</p>'; 74 html += `<div class="errors"></div>`; 75 76 html += '</select>'; 77 html += '<input type="number" class="year" placeholder="年(西暦)" min=0 save="" oninput="sliceMaxLength(this, 4)" oninput="validity.valid ? this.save = value : value = this.save;">'; 78 html += '<input type="number" class="month" placeholder="月" min=0 save="" oninput="sliceMaxLength(this, 2)" oninput="validity.valid ? this.save = value : value = this.save;">'; 79 html += '<input type="number" class="days" placeholder="日" min=0 save="" oninput="sliceMaxLength(this, 2)" oninput="validity.valid ? this.save = value : value = this.save;">'; 80 html += '<br><button>年齢確認</button></div>'; 81 82 $('body').append(html); 83 84 $('.ac-overlay').animate({ 85 opacity: 1, 86 }, 500, () => { 87 _this.reCenter($('.ac-container')); 88 $('.ac-container').css({ 89 opacity: 1, 90 }); 91 }); 92 93 //フォーカスでプレースホルダ消す 20200812.一旦無効化 94 /*('.ac-container .days, .ac-container .month,.ac-container .year').focus(function () { 95 $(this).removeAttr('placeholder'); 96 });*/ 97 }, 98 setAge() { 99 _this.age = ''; 100 const birthday = new Date(_this.year, _this.month, _this.days); 101 const ageDifMs = Date.now() - birthday.getTime(); 102 const ageDate = new Date(ageDifMs); // miliseconds from epoch 103 _this.age = Math.abs(ageDate.getUTCFullYear() - 1970); 104 }, 105 getStorage() { 106 if(settings.storage === 'cookie') { 107 return document.cookie.split(';').filter((item) => item.trim().startsWith('ageVerified=')).length; 108 } else { 109 return storage.getItem('ageVerified') === 'true'; 110 } 111 }, 112 setStorage(key, val, expires) { 113 try { 114 if(settings.storage === 'cookie') { 115 if(expires) { 116 let date = new Date(); 117 date.setTime(date.getTime() + (expires * 24 * 60 * 60 * 1000)); 118 expires = date.toGMTString(); 119 } 120 document.cookie = "ageVerified=true; expires=" + expires + ";"; 121 } else { 122 storage.setItem(key, val); 123 } 124 return true; 125 } catch (e) { 126 return false; 127 } 128 }, 129 handleSuccess() { 130 const successMsg = `<h3>${settings.successMsg.header}</h3><p>${settings.successMsg.body}</p>`; 131 $('.ac-container').html(successMsg); 132 setTimeout(() => { 133 $('.ac-container').animate({ 134 top: '-350px', 135 }, 200, () => { 136 $('.ac-overlay').animate({ 137 opacity: '0', 138 }, 500, () => { 139 if (settings.redirectTo !== '') { 140 window.location.replace(settings.redirectTo); 141 } else { 142 $('.ac-overlay, .ac-container').remove(); 143 if (settings.success) { 144 settings.success(); 145 } 146 } 147 }); 148 }); 149 }, 2000); 150 }, 151 handleUnderAge() { 152 const underAgeMsg = `<div class="underAgeMsg">${settings.underAgeMsg}</div>`; 153 $('.ac-container').html(underAgeMsg); 154 if (settings.redirectOnFail !== '') { 155 setTimeout(() => { 156 window.location.replace(settings.redirectOnFail); 157 }, 2000); 158 } 159 if (settings.underAge) { 160 settings.underAge(); 161 } 162 }, 163 }; // end _this 164 165 if (_this.getStorage()) { 166 return false; 167 } 168 169 _this.buildHtml(); 170 171 $('.ac-container button').on('click', () => { 172 _this.setValues(); 173 if (_this.validate() === true) { 174 _this.setAge(); 175 176 if (_this.age >= settings.minAge) { 177 if (!_this.setStorage('ageVerified', 'true', settings.storageExpires)) { 178 console.log(settings.storage + ' not supported by your browser'); 179 } 180 _this.handleSuccess(); 181 } else { 182 _this.handleUnderAge(); 183 } 184 } 185 }); 186 187 $(window).resize(() => { 188 _this.reCenter($('.ac-container')); 189 setTimeout(() => { 190 _this.reCenter($('.ac-container')); 191 }, 500); 192 }); 193 }; 194}(jQuery));

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

safariのバージョンが古すぎたのが問題でした。

投稿2021/04/09 01:47

meli

総合スコア312

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問