- 締切済み
自動的に連番生成したURLにリンクを張りたい
任意の数字を入力するだけでその数だけ連番のリンクを作りたいのですが方法がわかりません。自動で連番のURLを生成することは出来ました。しかし、リンクを張ることが出来ず、現在の方法ではいつまでたっても解決しないような気がしています。指定した任意の数だけ自動的に連番URLを生成し、さらにリンクを張り表示する方法はないでしょうか？ 具体的には「３」という数字を指定することで <a href="http:***.com/01.html">01</a> <a href="http:***.com/02.html">02</a> <a href="http:***.com/02.html">02</a> といったリンクを自動で作りたいと思っております。 ・http:***.com/という部分は自動ではなく事前に指定します。 現在の状態 <head> <script language="JavaScript" type="text/javascript"> function $(x){ return document.getElementById(x); } function numbering(){ var base = $("base").value; var begin = parseInt($("begin").value); var end = parseInt($("end").value); var zerosup = $("zero").checked; var result = $("result"); result.innerHTML = ""; if(begin > end){ alert("Too large begin number!"); return; } var zerosupsize = 0; if(!zerosup){ zerosupsize = ("" + end).length; } var r = ""; for(var i=begin; i<=end; i++){ var num; if(!zerosup){ num = fill_left(String(i), "0", zerosupsize) }else{ num = String(i); } r += base.replace(/\$/gm, num) + "\n"; } result.innerHTML = r; } function fill_left(s, x, size){ var n = size - s.length; if(n > 0){ s = repeat(x, n) + s; } return s; } function repeat(x,size){ var s = ""; for(var i=0; i<size; i++){ s += x; } return s; } </script> </head> <body> <form id="numbering"> base($の部分を数字に置換) : <input id="base" type="radio" size="100" value="http://www.****.com/$.html"></input><br /> zero suppress : <input id="zero" type="checkbox" checked></input><br /> begin : <input id="begin" type="text" value="1" size="10"></input><br /> end : <input id="end" type="text" value="20" size="10"></input><br /> <input id="create" type="button" value="numbering!" onclick="numbering()"></input><br /> </form> <textarea id="result" cols="80" rows="10"></textarea> </body> どうかよろしくお願いいたします。
- junichi103
- お礼率80% (4/5)
- JavaScript
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
・ラジオボタンをクリックしただけで結果を表示できないでしょうか？ tags[i].onclick=function(){var radio=this.form[this.name];for(var i=0;i<radio.length;i++) if(radio[i].checked) radio.value=radio[i].value;} の行を以下に変更してください。 tags[i].onclick=function(){var radio=this.form[this.name];for(var i=0;i<radio.length;i++) if(radio[i].checked) radio.value=radio[i].value;numbering(this.form)} ようはクリックしたときにnumbering()を呼べばいいので ・リンク内の文字表示なのですが、リンクの連番と同じナンバーにする方法はありますか？ え～・・・これはソースみてわからないかなぁ・・・？ a.appendChild(document.createTextNode(i)) ではなく a.appendChild(document.createTextNode(num)) でいけるはず。
- yambejp
- ベストアンサー率51% (3827/7415)
こんな風にするとradioのvalueがとれます <head> <script language="JavaScript" type="text/javascript"> window.onload=function(){ getRadioValue(); } function getRadioValue(){ var tags=document.getElementsByTagName("input"); for(var i=0;i<tags.length;i++) if(tags[i].type=="radio"){ tags[i].onclick=function(){var radio=this.form[this.name];for(var i=0;i<radio.length;i++) if(radio[i].checked) radio.value=radio[i].value;} tags[i].onclick(); } } function numbering(f){ var base = f.base.value; var begin = parseInt(document.getElementById("begin").value); var end = parseInt(document.getElementById("end").value); var zerosup = document.getElementById("zero").checked; var result = document.getElementById("result"); while ( result.hasChildNodes() ) result.removeChild(result.firstChild); for(var i=begin; i<=end; i++){ var num=zerosup?i.toString():(100+i).toString().match(/\d{2}$/); var url=base.replace(/\$/,num); var a=document.createElement("a"); a.setAttribute("href",url) a.appendChild(document.createTextNode(url)) result.appendChild(a) result.appendChild(document.createElement("br")) } } </script> </head> <body> <form id="numbering"> base : <input name="base" type="radio" value="http://www.hoge1.com/$.html" checked />hoge1 <input name="base" type="radio" value="http://www.hoge2.com/$.html" />hoge2 <input name="base" type="radio" value="http://www.hoge3.com/$.html" />hoge3<br /> zero suppress : <input id="zero" type="checkbox" checked /><br /> begin : <input id="begin" type="text" value="1" size="10" /><br /> end : <input id="end" type="text" value="20" size="10" /><br /> <input id="create" type="button" value="numbering!" onclick="numbering(this.form)" /><br /> </form> <div id="result"></div> </body>
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 一応こういう形でもできますが・・・ <script type="text/javascript"><!-- function numbering() { base = document.getElementById("base").value; begin = eval(document.getElementById("begin").value); end = eval(document.getElementById("end").value); zero = document.getElementById("zero").checked; res = document.getElementById("result"); res.innerHTML = ""; if(begin > end) { alert("始点と終点が変です"); return false; } for(i=begin;i<=end;i++) { if(i<10 && zero == true){ i= "0"+i; } url = base.replace(/\$/,i); res.innerHTML += "<a href='" + url + "'>" + i + "<\/a><br>"; } } //--></script> <form id="numbering"> base : <input id="base" name="baseurl" type="radio" size="100" value="http://www.****.com/$.html" /><br /> zero suppress : <input id="zero" type="checkbox" checked /><br /> begin : <input id="begin" type="text" value="1" size="10" /><br /> end : <input id="end" type="text" value="20" size="10" /><br /> <input id="create" type="button" value="numbering!" onclick="numbering()" /><br /> </form> <div id="result"></div> #2様も触れているようにbaseとなるURLをradioで選択するのであればスクリプト内1行目 base=・・・を変更する必要があります
お礼
ありがとうございます！URLをリンクする事には成功いたしました。 ご指摘のとおりbaseのURLをradioで選択したいのですが、具体的にbase=・・・をどのようにすればよいのでしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
とりあえずこんな感じで <head> <script language="JavaScript" type="text/javascript"> function numbering(){ var base = document.getElementById("base").value; var begin = parseInt(document.getElementById("begin").value); var end = parseInt(document.getElementById("end").value); var zerosup = document.getElementById("zero").checked; var result = document.getElementById("result"); while ( result.hasChildNodes() ) result.removeChild(result.firstChild); for(var i=begin; i<=end; i++){ var num=zerosup?i.toString():(100+i).toString().match(/\d{2}$/); var url=base.replace(/\$/,num); var a=document.createElement("a"); a.setAttribute("href",url) a.appendChild(document.createTextNode(url)) result.appendChild(a) result.appendChild(document.createElement("br")) } } </script> </head> <body> <form id="numbering"> base : <input id="base" type="radio" size="100" value="http://www.****.com/$.html" /><br /> zero suppress : <input id="zero" type="checkbox" checked /><br /> begin : <input id="begin" type="text" value="1" size="10" /><br /> end : <input id="end" type="text" value="20" size="10" /><br /> <input id="create" type="button" value="numbering!" onclick="numbering()" /><br /> </form> <div id="result"></div> </body> ラジオボタンbaseのvalueを取るあたりは、方式を変えたほうがよいと 思いますよ・・・（おそらく選択してやりたいのでしょうから いまのままではいきづまります）
お礼
具体的な方法ありがとうございます！ ご察しのとおり、ラジオボタンで複数の選択肢をつくってURLの選択をしたいと思っております。さらにご指摘のとおりいきづまっています。。
- arexis
- ベストアンサー率66% (66/99)
なるべくいじらずに済ませるなら r += base.replace(/\$/gm, num) + "\n"; を r += '<a href="' + base.replace(/\$/gm, num) + '">' + num + '</a><br>' <textarea id="result" cols="80" rows="10"></textarea> を <div id="result"></div> で、質問の意図にそってますか?
お礼
ありがとうございます。こんなシンプルな記述で出来るんですね・・・ 根本的に間違っていると思っていたのでとても参考になりました！
お礼
ありがとうございます！希望通り選択して表示することが出来ました。 度々申し訳ありませんが、あと少しお聞きしたいことがございます。 ・ラジオボタンをクリックしただけで結果を表示できないでしょうか？ ・リンク内の文字表示なのですが、リンクの連番と同じナンバーにする方法はありますか？ var a=document.createElement("a"); a.setAttribute("href",url) a.appendChild(document.createTextNode(i)) result.appendChild(a) この状態では一つ目のリンクの連番部分が「01」という表示でも「1」とゼロ抜きの表示となってしまいます・・・