自動的に連番生成したURLにリンクを張りたい

締切済

質問者：junichi103
質問日時：2008/01/20 11:09
回答数：5件

任意の数字を入力するだけでその数だけ連番のリンクを作りたいのですが方法がわかりません。自動で連番の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>

どうかよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： yambejp
回答日時：2008/01/21 13:12

・ラジオボタンをクリックしただけで結果を表示できないでしょうか？

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))
でいけるはず。

- 0
- 件

通報する

No.4

回答者： yambejp
回答日時：2008/01/21 09:46

こんな風にすると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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！希望通り選択して表示することが出来ました。
度々申し訳ありませんが、あと少しお聞きしたいことがございます。
・ラジオボタンをクリックしただけで結果を表示できないでしょうか？
・リンク内の文字表示なのですが、リンクの連番と同じナンバーにする方法はありますか？
var a=document.createElement("a");
a.setAttribute("href",url)
a.appendChild(document.createTextNode(i))
result.appendChild(a)
この状態では一つ目のリンクの連番部分が「01」という表示でも「1」とゼロ抜きの表示となってしまいます・・・

通報する

お礼日時：2008/01/21 12:28

No.3

回答者： leap_day
回答日時：2008/01/20 22:31

こんにちは

一応こういう形でもできますが・・・

<script type="text/javascript"></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=・・・を変更する必要があります

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！URLをリンクする事には成功いたしました。
ご指摘のとおりbaseのURLをradioで選択したいのですが、具体的にbase=・・・をどのようにすればよいのでしょうか？

通報する

お礼日時：2008/01/21 03:04

No.2

回答者： yambejp
回答日時：2008/01/20 14:32

とりあえずこんな感じで

<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を取るあたりは、方式を変えたほうがよいと
思いますよ・・・（おそらく選択してやりたいのでしょうから
いまのままではいきづまります）

- 0
- 件

通報する

この回答へのお礼

具体的な方法ありがとうございます！
ご察しのとおり、ラジオボタンで複数の選択肢をつくってURLの選択をしたいと思っております。さらにご指摘のとおりいきづまっています。。

通報する

お礼日時：2008/01/21 02:58

No.1

回答者： arexis
回答日時：2008/01/20 13:51

なるべくいじらずに済ませるなら

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>

で、質問の意図にそってますか?