やりたいこと
DBの検索結果を、htmlのテーブルで出力させるアプリを作っています。
クエリは全てgetで処理しています。
検索結果は500件ずつ表示させるので、そのボタンを作っています。
仕様
「次の500件」ボタンを押すと、現在のパスを取得し、
正規表現で多少の解析をしたのちに、
&move=next500
を付け足す。
コード
javascript
1var movepage= function(nexpre) { 2 var url=decodeURI(location.href); 3 var myregex1=new RegExp(/?/); 4 var myregex2=new RegExp(/&move=next500|&move=previous500/); 5 var myregex3=new RegExp(/page=([0-9]+)/); 6 7 url = url.replace(myregex2,""); 8 9 if(url.match(myregex1)==null){ 10 url+="?"; 11 } 12 13 if(url.match(myregex3)==null){ 14 url+="&page=1"; 15 }else{ 16 var curpagenum=url.match(myregex3); 17 if (nexpre==="next"){ 18 var newpagenum=Number(curpagenum[1]) + 1; 19 }else{ 20 var newpagenum=Number(curpagenum[1]) - 1; 21 } 22 var newpagestr="page=" + String(newpagenum); 23 url=url.replace(myregex3,newpagestr); 24 } 25 url += "&move=next500"; 26 window.location.href=url; 27}; 28 29 30var next500=document.getElementById("next500"); 31if(next500){ 32 next500.addEventListener("click",movepage("next")); 33}; 34
現象
以上のコードでwebページを開くと、
何もボタンをおさないうちから、クリックイベントに登録した関数が連続して実行され始めます。
つまり、勝手に「次の500件」が連続して動作し始め、次々にページが切り替わります。
なお、
movepage= function(nexpre){...
の関数定義をやめて、
js
1if(next500){ 2 next500.addEventListener("click",function(){ 3・・・
という風に直書きすると、正常に動作します。
質問
JSのことがあまり分かっていないので基本的なところで間違えているのかもしれません。
どのようにしたら解決するでしょうか。
なお、前の500件でも同じような処理をするので、重複を避けるため、直書きはしたくないと思っています(現状は暫定的に、2つとも直書きして無理矢理動かしています)。
よろしくお願いします。
(なお、はじめは普通にformからクエリを発行していたのですが、諸々の兼ね合いで、このJSの方式のほうが管理しやすいと思ってこうしました。最適なのかどうかわかりませんが、それ自体も問題があるということでしたら、ご指摘ください。また、JSのコードの作り方もここがよくないよ、などあったら遠慮無くご指摘ください)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/04/09 06:16
2018/04/09 06:30
退会済みユーザー
2018/04/09 09:47
2018/04/09 11:07
退会済みユーザー
2018/04/09 23:23