http://okwave.jp/qa5330543.html
上記の回答5で希望する事はできたのですが、同じページ内で
違う箇所のURLを別々に変えたいです。
X,Yのテキストボックスに入力されたものに、それぞれの初期値の
部分だけ変更させるにはどうしたら良いでしょうか?
X [ ] 初期値sample8
Y [ ] 初期値test5
<a href="http://sample8.jp/fol/etc_a.html">a</A>
<a href="http://test5.jp/fol/etc_b.html">b</A>
<a href="http://sample8.jp/fol/etc_c.html">c</A>
<a href="http://test5.jp/fol/sample8_d.html">d</A>
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
こんにちは。
ちょっと、複雑にした応用問題といったところでしょうか。
1個のものをベースに個数を一般化するとどうなるかを考えればよろしいかと。
ご自分でどこまでできて、どの部分ができないのかを提示なさったほうが、適切な回答が得られると思いますよ。
(ご質問文では、どこが分からないのか不明ですし、ただ「作って」といのはここの主旨ではないかと。)
この回答への補足
前回の回答5の記述をそのまま使用しているので、どういう動作をしているのか解りません。
<div id="target">となっているのでidを分ければ出来るかなと思いましたが、
同じdiv内に別々に換えたい場所がありますので、その対処も解りません。
<input type="text" onmouseout="chgurl(this.value);">を2つにしても別々に認識させるのに変えられるような箇所は(this.value)かなと思いましたが、どう変えたらいいか解りません。
No.2
- 回答日時:
> 初期値がテキストボックスに表示されていますし
何の問題があるかよくわからんけど、どうしても表示したくないとのことなので、しょうがないから独自属性を使用。これもいやなら、適当にプログラム内に埋め込むなり好きなように。
<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script type="text/javascript">
//@cc_on
function escapeReg( str ) { return str.replace (/([.?*+\-^$\\|!=\(\)\[\]{}])/g, '\\$1'); }
function changehost( input ) {
var as = document.getElementById('target').getElementsByTagName( 'A' );
var i, L = as.length;
var pattern = new RegExp( '^http:\/\/' + escapeReg( input.getAttribute( 'data-targethost' ) ) );
for ( i=0; i<L; i++ ) {
as[ i ].href = as[ i ].href.replace( pattern, 'http://'+input.value );
input.setAttribute( 'data-targethost', input.value );
}
}
</script>
</head>
<body>
<form action="#">
<p>
<input type="text" value="" data-targethost="sample8" onchange="changehost(this);">
<input type="text" value="" data-targethost="test5" onchange="changehost(this);">
</p>
</form>
<div id="target">
<a href="http://sample8.jp/fol/etc_a.html">a</a>
<a href="http://test5.jp/fol/etc_b.html">b</a>
<a href="http://sample8.jp/fol/etc_c.html">c</a>
<a href="http://test5.jp/fol/sample8_d.html">d</a>
</div>
</body>
</html>
この回答への補足
テキストボックスに文字があると入力する際に毎回消さなくてならないので
最初から空欄のほうが便利です。
上記で試してもテキストボックスに入力したものに変わってくれませんでした。
元のURLのままでした。
No.1
- 回答日時:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script type="text/javascript">
//@cc_on
document./*@if(1) attachEvent('on'+ @else@*/ addEventListener( /*@end@*/ 'click', function( evt ){
var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
if ( target.tagName == 'A' ) {
var m = /http:\/\/([^.]*)/.exec( target.href );
var host = m[ 1 ];
var change_list = document.getElementById( 'CHANGE_LIST' );
var eles = change_list.elements;
var i, L = change_list.length;
for ( i=0; i < L; i ++ ) {
if ( eles[ i ].defaultValue == host ) {
location.href = target.href.replace( host, eles[ i ].value );
evt./*@if(1) returnValue = false; @else@*/ preventDefault(); /*@end@*/
}
}
}
}, false );
</script>
</head>
<body>
<form action="#" id="CHANGE_LIST">
<p>
<input type="text" value="sample8">
<input type="text" value="test5">
</p>
</form>
<div>
<a href="http://sample8.jp/fol/etc_a.html">a</a>
<a href="http://test5.jp/fol/etc_b.html">b</a>
<a href="http://sample8.jp/fol/etc_c.html">c</a>
<a href="http://test5.jp/fol/sample8_d.html">d</a>
</div>
</body>
</html>
</body>
</html>
この回答への補足
初期値がテキストボックスに表示されていますし、全く変更されませんでした。
http://okwave.jp/qa5330543.htmlの回答5のようにしたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
- Word(ワード) 文字打ちについて。 1 2022/05/22 12:53
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP PHP MySql ページング 2 2022/09/20 06:38
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
読み込んだQRコードをフォーム...
-
jsonテキストデータの並び替え...
-
jQueryで同じクラス名のものを...
-
セレクトを全て選択されていな...
-
階層別の組織図の自動作成について
-
出発駅A、到着駅Bを選択すると...
-
IndexedDB を使ってファイルア...
-
初心者です。gulpでコンパイル...
-
jsで質問です。 ボタンが二つ存...
-
スマホ上で、左右スワイプで次...
-
GASに文字列として関数を入れる...
-
フォームが空欄の時にフォーム...
-
画像の表示位置
-
変数宣言と初期値代入の場所に...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptがoffだったらどっか...
-
海外の時間をホームページ上に表示
-
ホームページ内検索をフォーム...
-
【JavaScript】特定の条件で特...
-
JavaScriptからPerlへデータを...
-
JavaScriptを使用してマルチラ...
-
確認ダイアログを表示出来ない
-
【javascript】 IMEのカタカナ...
-
javascriptとcookieの判定とペ...
-
簡易版パスワード入力画面について
-
URL変更2
-
宜しくお願いします。
-
HTMLの取得と解析について
-
チェックボタンをクリックする...
-
pythonにおける単方向リストの...
-
パスワードを二つ用いて隠しペ...
-
カンマ区切り形式ではなく、セ...
-
キングファイルの背表紙を作成...
-
パワーポイントで参照ページを...
-
<IFRAME>でコンテンツ部分のみ...
おすすめ情報