質問: ### 前提・実現したいこと 再度、お世話になります。 fc2カートにてショッピングページを運営しております。 先日、ここでご教授頂いた方法に基づいてチェックボックスによるフィルタ検索機能を追加しましたが、他のcheckboxの機能と競合してしまったらしく、 検索機能と他のcheckboxによる機能が両立できる解決策を探しております。 htmlは書き換えられますが、大元のショップのjavascriptは仕様で書き換えられないので、 別ファイルにして読み込ませようと考えております。 アドバイスいただけましたら、お願いいたします。 なお、/?word=AB+CD+{テキストボックスの語句}という結果になるのであれば、 checkboxにての機能追加にはこだわっておりません。 大元のショップのスクリプトファイルのコードですが、 リンクを貼れるようですので、掲載いたします。 こちら 実験中のショップのURLも掲載いたします。 こちら 他にも何か必要なものがありましたら、ご連絡くださいませ。 ### 発生している問題・エラーメッセージ 「https://xxx.com//?word=」の後に、「AB+CD+{テキストボックスの語句}」にするという機能自体はとても上手く機能しているのですが、 メールの送信ボタンやカートに入れるボタンなど、他のcheckbox機能を阻害している状況です。 エラーメッセージ firefox: TypeError: can't convert undefined to object kissdesigndoll.cart.fc2.com:147:9 map self-hosted:282:13 <匿名関数> https://xxx.cart.fc2.com/:147:9 ページ内該当コード 147 var v=[].map.call(t.elements["w"],function(x){ 148 return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:""; 149 }).filter(function(x){return x!==""}).join(" "); ### 該当のソースコード 詳細検索のhtmlとjavascript ``` 実際に使用しているコードは長いため、同じ仕様の短いものを記述しております。 ああああ AB CD EF GH ``` ``` document.addEventListener('submit',function(e){ var t=e.target; e.preventDefault(); var f=document.querySelector('#f0'); if(f) f.parentNode.removeChild(f); var v=[].map.call(t.elements["w"],function(x){ return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:""; }).filter(function(x){return x!==""}).join(" "); var f=document.createElement("form"); f.setAttribute("id","f0"); f.setAttribute("action",t.getAttribute("action")); f.setAttribute("method",t.getAttribute("method")); f.style.display="none"; var word=document.createElement("input"); word.type="text"; word.name="word"; word.value=v; f.appendChild(cword); document.querySelector('body').appendChild(f); f.submit(); }); ``` 例としてカートに入れるボタンのhtml(javascriptはこちらを参照ください。) ``` ``` ### 試したこと 変数のバッティングかと思い、t,f,x,wordなどの変数を他の単語に変えてみたりしましたが、やはり同じ結果でした。 ### 補足情報(FW/ツールのバージョンなど) 環境:PCブラウザのfirefox,chrome、スマホブラウザのchromeにて状況確認
回答: JavaScriptの該当行通りのエラーだと思います。148行目を確認すると、 ``` return (x.type=="text" || x.type=="checkbox"&&x.checked)?x.value:""; ``` となっています。読み解くと、フォーム属性がチェックボックスであり、かつチェックされているかという判定なので、現状だと全部ここで処理されてしまうことになります。 なので、解決できるかもしれない方法としたら 1. 別のCheckBox要素と同一Formタグ内に記述しない。 2. そのスクリプト処理を行う前に、該当部分の処理を行い、そこで処理を中断するようにする ソースの構造は詳しくわかっていないので確信はとれませんが、方法とすると、現在問題が発生しているスクリプトを読み込む前に別のスクリプトを読み込ませ、そこで処理を中断するのが一番適切な方法でしょうか。