プロが教える店舗＆オフィスのセキュリティ対策術

html内＞テーブル内に複数のjavascriptの設置方法を教えてご教授下さい・

解決済

  • 質問者：triumphal
  • 質問日時：
  • 回答数：3件

皆様のお力をお借りし、javascriptを利用してリンク先の変更を無事解決できました。
次に行おうとしたのが外部ファイル(js)にて呼び出そうと試みましたが、
jsファイル内にhtmlが入っている為、不可能だということも解かりました。

html内に複数のjavascriptを、しかもテーブル内に載せてみたのですが
全てが同時に動いたり、全て動かなかったり、上のテキスト領域に記入したのに
下のリンク先が変更になっていると言う様な、良く解からない状況になりました。

下記が現在の状況なのですが、どなたか改善点をご教授願えませんでしょうか？
・・贅沢と我侭を言えば、正解をそのまま記載していただきたいです・・・。

＝＝＝ここから＝＝＝＝

<table border="1" width="300" height="100">
<tbody>
<tr><td height="100">

<script>
function change(){
var change=document.getElementById("change");
var tags=document.getElementsByTagName("a");
for(var i=0;i<tags.length;i++){
var url="http://aaa.bbb.ccc/";
var url2="?ddd=";
var url3="eee";
var url4="&fff=";
if(tags[i].href.match(url)){
tags[i].href=url+url2+url3+url4+change.value;
};
}
}
</script>
<a href="http://aaa.bbb.ccc/?ddd=eee&fff=xxxxx" target="_blank">
<img src="http://aaa.bbb.ccc/image/ddd.gif"></a>
<br>
<input type="text" id="change"><input type="button" value="変換" onclick="change()">
</td>
</tr>
</tbody>
</table>

<br>

<table border="1" width="300" height="100">
<tbody>
<tr><td height="100">

<script>
function change(){
var change=document.getElementById("change");
var tags=document.getElementsByTagName("a");
for(var i=0;i<tags.length;i++){
var url="http://000.111.222/";
var url2="?333=";
var url3="444";
var url4="&555=";
if(tags[i].href.match(url)){
tags[i].href=url+url2+url3+url4+change.value;
};
}
}
</script>
<a href="http://000.111.222/?333=444&555=xxxxx" target="_blank">
<img src="http://000.111.222/image/333.gif"></a>
<br>
<input type="text" id="change"><input type="button" value="変換" onclick="change()">
</td>
</tr>
</tbody>
</table>

＝＝＝ここまで＝＝＝＝

自分の出来る範囲を超えているのは重々承知しておりますが
何とか実現したい事ですので、どうか宜しくお願いします。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

う～～ん。

　よくわかんないけど…

なんか、わざわざ難しくしてませんか？
いろんなことに挑戦するのも悪くないけど、まずは足元を固めてから。

ソースだけでは意図までは不明ですが、要は、serchの一部にテキストボックスからの入力値を入れたいということだと想像しました。
テキストボックスと画像の関係が1対1なのか、離れているのかも不明だけれど、多分、傍にあるやつだけが関連を持っていて、離れているもの同士は関係ないんですよね？
（スクリプトは常に、全画像をチェックしているみたいなので…）

テクストボックスの値をserchに入れるのはinputタグのもともとの機能なので、それを利用すればスクリプトなど使わなくてもできませんか？（というか、それが本来の方法）
そのほうが素直でわかりやすいし。（って言いながら、スクリプト入ってるけど…）

全体像（=最終的な形）のイメージが不明で、ジャンプ先もよくわからないので、全然違ってるのかも知れませんけど、↑のソースから想像して、こんなことがやりたいのではないかと。

<html>
<head>
<style type="text/css">
td.hoge {width:300px;height:100px;border:2px ridge white;}
td img {border:1px solid blue; cursor:pointer;}
</style>
</head>

<body>
<table>
<tbody>
<tr><td class="hoge">
<form method="GET" action="http://aaa.bbb.ccc/" target="_blank">
<img src="http://aaa.bbb.ccc/ddd.gif" onClick="submit()">
<br>
<input type="hidden" name="ddd" value="eee">
<input type="text" name="fff" value="xxxxx">
</form>
</td></tr>

<tr><td><br></td></tr>
<tr><td class="hoge">
<form method="GET" action="http://000.111.222/" target="_blank">
<img src="http://aaa.bbb.ccc/ddd.gif" onClick="submit()">
<br>
<input type="hidden" name="333" value="444">
<input type="text" name="555" value="xxxxx">
</form>
</td></tr>
</tbody>
</table>
</body>
</html>

＊「変換」ボタンは不要なので、はずしてます。
ボックスに値を入れて画像クリックすれば、GET形式でsubmit。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

この方法で無事解決しました。
大変ありがとうございます。

通報する
お礼日時：2009/01/10 10:24

No.2

  • 回答者： Werner
  • 回答日時：

> 俺は素直な人間じゃないんだ！


> 別に喧嘩売るつもりはない。
それは別にかまいませんよ。
言いたいことはちゃんと言えばよい。

> しかし貴方の回答は回答ではない。
そうかもね。アドバイスのつもりだから
回答はあなたに見つけ出して欲しかった。

> ちなみに、urlに分ける事に関してはやってみればわかるよ。
言ってなくて悪かったけど、試した上で問題なかったので分からないと書きました。
ちゃんとコード提示してくれてるから動作確認しやすかったしね。

あと改善点についても、ANo.1の修正で動作することも確認してます。
(ANo.1最後の1行ね。)

そうそう、Firefoxで動作確認してたから後になって気づいたけど、
　http://000.111.222/
このURLはIE7だと
　http://0.111.0.222/
として扱われてしまうので、matchでマッチしなくなってしまいます。
実際にはこんなURLは使わないと思いますが、
テスト時に使ってはまる可能性はありますから念のため注意しておきます。

もう一点。
正規表現において.(ドット)は任意の1文字という意味を持つので、
　match("http://aaa.bbb.ccc/")
は
　"http://aaaxbbbxccc/"
のような文字列にもマッチしてしまいます。
これは少なくとも今回は問題になっていないようですが、
今後問題になる可能性もありますから指摘しておきます。



> 安直にいかないから質問しているんだよ。
だからといって、質問すれば安直にいくと思ってるわけではないんでしょう？
回答者と一緒に悩み考える気はあったのでは？

> 解からないなら無視すりゃ良いだろ。
分からない点を無視するような姿勢は技術者としてどうかと思うけどね。
分からない点とは無視する物ではなく、とことん突き詰める物です、私にとっては。

> 無知だと思って遊んだつもりなのか?
コードを提示してるなど質問の仕方が適切で
やる気も感じられたからちょっと細かい部分にも触れてみました。
正直一度に全部は理解してもらえないかとも思いましたが、
そんなのは聞き返してくれればよいと思ってた。

> もしかしたら答えなのかもしれないが
> 君の言っている言葉が全く解からないんだ。
じゃあどこが分からないのか私がうんざりするくらい聞き返してみたら。
いや、分からないから無視するんでしたか…。

> 簡単に誰にでも説明できない位の能力なら顔出すなって！
回答を理解できない位の能力なら質問する意味がないから顔出すなって
っていうのと何が違うんだろう。
あなたには理解できなくても他の人には有用な情報になるかもしれないんだから
あなたの都合で回答者を限定するのはわがままだと思う。
（強制力がある訳じゃないので言うのは自由なんですけどね。）

自分に理解できない回答はするなとか私には考えられないな。
理解できるように努力しても良いし、
将来の自分にとって有用な情報になるかもしれない、
もし本当に役に立たなければ無視すればよい。
なにより無用な制限をすると貴重な情報を得る機会を失ってしまうかもしれない。

最後に。私もあまり素直な人間ではないようです。
    • good
    • 2
    • 件
通報する

No.1

  • 回答者： Werner
  • 回答日時：

> 次に行おうとしたのが外部ファイル(js)にて呼び出そうと試みましたが、


> jsファイル内にhtmlが入っている為、不可能だということも解かりました。
別に不可能とは言ってない。
jsファイルにhtmlを入れなければできると言ったつもり。
htmlはhtmlファイルの方に書けばよいでしょ？
どうしてもjsファイルの方に書きたければ、
htmlを出力するJavaScriptを書く手もある。(あまり好きではないけど。)

> 下記が現在の状況なのですが、どなたか改善点をご教授願えませんでしょうか？
- idは1つのHTML内で唯一無二でなければならない。
　だいたい同じidが有ったらgetElementByIdでどうやってそれらを区別するの？
- function change() が複数定義されている。(たぶん後で定義した方が有効になってる。)
　別名にするか1つにするべき。1つにした場合は引数で動作を変更できるようにする。
- hrefを書き換えるA要素が決まっているなら
　全てのA要素から検索するよりもA要素にもidつけた方が良くないか。
- 間違ってるわけではないけど、document.write等を使わないなら
　script要素はheadの方に書いた方が良くないか？
　今の方が見やすいならこのままでも良いけど。
- url2,url3,url4を分けている理由が分からない。(将来別々に取得する予定でもある？)

とりあえず動けばよいって言うなら、
関数名とidを変更してください。（安直にはchange1,change2とか。）

この回答への補足

ご回答ありがとうございます！
と・・言いたい所だが、すまん！
俺は素直な人間じゃないんだ！

別に喧嘩売るつもりはない。
しかし貴方の回答は回答ではない。

こっちは解からないと悩んで考えて質問・投稿しているんだよ。
それを、～～ではないか？とか理由がわからないとか。

ちなみに、urlに分ける事に関してはやってみればわかるよ。

要素を言っているのではない。
安直にいかないから質問しているんだよ。

解からないなら無視すりゃ良いだろ。
無知だと思って遊んだつもりなのか?

もしかしたら答えなのかもしれないが
君の言っている言葉が全く解からないんだ。

簡単に誰にでも説明できない位の能力なら顔出すなって！

少なくとも、これまで私に対し丁寧にきちんと
答えてくれた人の説明は手取り足取りの如く理解できたよ。

失礼します。

補足日時：2009/01/09 00:28
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報