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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

3276閲覧

スマホの実機だとJavaScriptが動かない

honestchanel

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2022/12/24 08:36

前提

WEBサイトを制作しております。
ページ内の検索機能を付けましたが、
PCやGoogle Chromeの検証ページ(スマホサイズ含め)では動きますが
スマホの実機(iPhone)ですとJavaScriptが動きません。
とても困っております。

Safari、firefox、Google Chromeのスマホのブラウザを試しましたが動きませんでした。
複雑な事象かもしれませんが、どなたか教えて頂けませんでしょうか...

実現したいこと

スマホの実機でもページ検索機能を動作するようにする

該当のソースコード

html

1<body> 2 <div class="search-box"> 3 <input id="product_word" placeholder="商品を検索する" type="text"> 4 <button type="submit">検索</button> 5 </div> 6 7 <div id="product_area" class="product-list"> 8 9 <div class="product_part"> 10 <div class="column"> 11 <div class="column__item1">商品名</div> 12 <div class="column__item2">ショウヒンメイノフリガナ</div> 13 <div class="column__item3"><img src="画像URL#" alt=""></div> 14 </div> 15 </div> 16 17 <div class="product_part"> 18 <div class="column"> 19 <div class="column__item1">カの商品</div> 20 <div class="column__item2">カノショウヒン</div> 21 <div class="column__item3"><img src="画像URL#" alt=""></div> 22 </div> 23 </div> 24 25 <div class="product_part"> 26 <div class="column"> 27 <div class="column__item1">サの商品</div> 28 <div class="column__item2">サノショウヒン</div> 29 <div class="column__item3"><img src="画像URL#" alt=""></div> 30 </div> 31 </div> 32 33 <div class="product_part"> 34 <div class="column"> 35 <div class="column__item1">サンプル</div> 36 <div class="column__item2">サンプルノショウヒン</div> 37 <div class="column__item3"><img src="画像URL#" alt=""></div> 38 </div> 39 </div> 40 41 <div class="product_part"> 42 <div class="column"> 43 <div class="column__item1">素晴らしい商品</div> 44 <div class="column__item2">スバラシイショウヒン</div> 45 <div class="column__item3"><img src="画像URL#" alt=""></div> 46 </div> 47 </div> 48 49 </div> 50 51 52 <script src="/js.js"></script> 53</body>

JavaScript

1const yougo_area = document.getElementById('product_area'); 2const yougo_parts = document.getElementsByClassName('product_part'); 3const input = document.getElementById('product_word'); 4 5input.addEventListener('input',()=>{ 6 reset(); 7 const sword = input.value; 8 if(sword==''){return} 9 const regexp = new RegExp(`(?<=>)[^<>]*?(${sword})[^<>]*?(?=<)`,'gi'); 10 const regexp2 = new RegExp(sword,'gi'); 11 [...yougo_parts].forEach(part=>{ 12 if(part.textContent.indexOf(sword)==-1){ 13 part.classList.add('hide'); 14 }else{ 15 part.innerHTML=part.innerHTML.replace(regexp,function(){ 16 return arguments[0].replace(regexp2,`<span class="highlight">${sword}</span>`); 17 }); 18 } 19 }); 20}); 21 22function reset(){ 23 console.log('reset'); 24 [...document.getElementsByClassName('highlight')].forEach(el=>{ 25 el.outerHTML=el.textContent; 26 }); 27 [...document.getElementsByClassName('hide')].forEach(el=>{ 28 el.classList.remove('hide'); 29 }); 30}

CSS

1.highlight{ 2 background-color:yellow; 3 } 4 .hide{ 5 display: none; 6 } 7 8/* 以下はCSS装飾*/ 9 .product-list{ 10 margin: 0 auto; 11} 12.column { 13 display: flex; 14 margin-left: -10px; /* カラム間の隙間 */ 15 border-top: solid 2px #333; 16 max-width:1280px; 17 18 } 19 .column__item1 ,.column__item2, .column__item3 { 20 box-sizing: border-box; 21 flex-shrink: 1; 22 padding: 15px; 23 margin-left: 10px; /* カラム間の隙間 */ 24 25 } 26 .column__item1{ 27 flex-basis:30%; 28 } 29 .column__item2{ 30 flex-basis:50%; 31} 32 33.column__item3{ 34 flex-basis:20%; 35 text-align: right; 36} 37 38.column__item3 img{ 39 height: 22px; 40} 41 42 .column:hover{ 43 background-color: #E5E5E5; 44 }

試したこと

スマホブラウザにて、
JavaScriptは「オン」になっていても動かなかったです。
いろいろお調べしましたが私にはわかりませんでした。

補足情報(FW/ツールのバージョンなど)

WordPressでのホームページ内での検索機能です。

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

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

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

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

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

maisumakun

2022/12/24 09:33

> Safari、firefox、Google Chromeのスマホのブラウザを試しましたが動きませんでした。 回答にならないのでここに書きますが、iOS上で動くブラウザは共通のエンジンを使うことになっているので、JavaScriptなどの対応状況はどのブラウザであっても基本的に同じです。
honestchanel

2022/12/24 10:40

ご回答ありがとうございます。 どのブラウザであっても基本的に同じという情報はありがたいです。
m.ts10806

2022/12/24 11:40 編集

全く動かないのか、一部でも動いているかは問題切り分けとして確認されたほうが良いと思います。 alert()で出力しても良いですし、実機でもデベロッパツールを使う方法はあります。
guest

回答2

0

正規表現のエラーかと思われます。

Safariで後読み正規表現が使いたい時の諦め方

投稿2022/12/26 05:48

a.com

総合スコア881

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

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

0

SpreadElement

Safari、firefox、Google Chromeのスマホのブラウザを試しましたが動きませんでした。

実機(iPhone)がないのであたっているか、わかりませんが…。

javascript

1[...document.getElementsByClassName('highlight')].forEach(el=>{ 2 el.outerHTML=el.textContent; 3}); 4[...document.getElementsByClassName('hide')].forEach(el=>{ 5 el.classList.remove('hide'); 6 });

DOM Standard仕様上、HTMLCollectionはiterable(反復可能)ではないので、SpreadElementが動かない挙動が正解です。

forEach を使いたいのであれば、NodeList を使うのがベターだと思います。

javascript

1document.querySelectorAll('.highlight').forEach(el => el.outerHTML = el.textContent); 2document.querySelectorAll('.hide').forEach(el => el.classList.remove('hide'));

本題とは関係ありませんが、el.outerHTML = el.textContent は、textContent値にHTMLタグが含まれていた場合、コード実行後に元のテキストノード値を復元できない問題があります。

html

1<span id="test">&lt;strong&gt;foo&lt;/strong&gt;</span> 2<script> 3'use strict'; 4const span = document.getElementById('test'); 5span.outerHTML = span.textContent; 6</script>

この問題は、replaceChild で要素ノードからテキストノードに置換するコードに変更する事で修正できます。

再現可能な短いサンプルコード

本回答で解決できなかったとして、まずはfukuさん自身で「現象を再現可能な最小限のコード」を作成する事から始めることをお勧めします。

現状では考えられる問題範囲が広く、一つ一つのコードが期待通りに動くか確認していくのが第一歩だと思います。

投稿2022/12/24 14:28

編集2022/12/24 14:40
think49

総合スコア18172

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問