- ベストアンサー
IDの持たせ方 (Re: IDのHTML文字列を…)
すみません、締め切った質問ですが、ご回答くださった steel_grayさんが予測されていた通り（下記）、 > ページ内の全リンクに「<br>↑のファイルがある…」が足されます。 > 一部のリンクだけに足すようにするにはなにか条件が必要です。 > （あるIDを持つDIV配下のリンクだけにするとか、 > あるclassを持つアンカーだけにする等。） '一部のリンクだけに' リンクを足すようにしたいの ですが、、、。自分なりに考えてみたのは、 (1) <head>内のスクリプトで下記の部分を改訂 var AnchorList = document.getElementsByTagName('A'); ↓ var AnchorList = document.getElementById('folder'); # getElementByIdでいいのですよね？getElement【s】ByIdでなく (2) <body>内の「<br>↑のファイルがある…」を挿入したい部分に<div>タグ＋IDを追加 <div id="folder"> <a href="file:///C:\temp\hoge1.txt">file:///C:\temp\hoge1.txt</a> </div> でも、動作せず、スクリプトエラーにもならず、です。 何が誤っていますでしょうか。 すみません、よろしくお願い致します。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
惜しかった。 var AnchorList = document.getElementsByTagName('A'); ↓ var AnchorList = document.getElementById('folder').getElementsByTagName('A'); これで folder 以下のAnchorのリストが作成できます。
補足
BLUEPIXYさん、steel_grayさん、ご教示ありがとうございます。 結論からいうと、お二人に手直しいただいたもの、両方を動作確認しました。 大変助かったのですが、私の説明不足で予想外の問題が出てしまいました。 今回の「HTML文字列を取得→加工→書き出したい」という質問、 要は全文検索システムNamazuで、検索すると次の例のような 検索結果リストが出ますが、 http://www.namazu.org/cgi-bin/namazu.cgi?query=namazu&whence=0&lang=ja&idxname=www.namazu.org.ja 私はこれを対・WebページでなくローカルHDD内の文書検索に利用して いるため、検索にHITしたファイルへの直リンに加え、ファイルの所在 するフォルダを開くリンクを併設したかったんです。 NamazuのHTMLテンプレートで関係ありそうな部分は下記のようになっており、 これがループして上記URL例のようにリストアップされるのだと推察しますが、 <dt>${namazu::counter}. <strong><a href="${uri}">${title}</a></strong> (スコア: ${namazu::score}) <dd><strong>著者</strong>: <strong>${author}</strong> <dd><strong>日付</strong>: <strong>${date}</strong> <dd>${summary} <dd><a href="${uri}"id="folder">${uri}</a> (${size} bytes)<br><br> わたしは↑の５行目の<a href ...>に、<div id="folder"><a href ...></div> としたところ、検索でHITしたファイルの１件目にしか 「<br>↑のファイルがある…」が付与されないのですね。 （１行目のリンクに、「<br>↑のファイルがある…」は必要ありませんよね？） 最初steel_grayさんに作っていただいたページ内の全リンクに文字列を追加する スクリプトだと、全部に「<br>↑のファイルがある…」が追加されたのですが。。。 最初の最初に、steel_grayさんに 「CGI本体は基本的に変更できないけど、（HTMLの）この部分なら 変更できるって制約などがあるなら、あらかじめ提示してもらわないと」 とご指摘いただきましたが、横着して説明を省くべきでなかったと反省しています。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
関連するQ&A
- HTML文字列を取得→加工→書き出すスクリプト
CGI（perl）がこういうHTMLを書き出すのですが、 <html> <body> <p><a href="file:///C:\temp\hoge1.txt">file:///C:\temp\hoge1.txt</a></p> <p><a href="file:///C:\temp24\hoge2.txt">file:///C:\temp24\hoge2.txt</a></p> :(中略) <p><a href="file:///C:\temp78\hoge15.txt">file:///C:\temp78\hoge15.txt</a></p> </body> </html> ↑のハイパーリンクに加え、hoge.txtが置かれている親フォルダへの リンクも併設したいです。イメージとしては、次のような感じです、 <html> <body> <p><a href="file:///C:\temp\hoge1.txt">file:///C:\temp\hoge1.txt</a><br> ↑のファイルがあるフォルダを開くなら<a href="file:///C:\temp\">こちら</a></p> <p><a href="file:///C:\temp24\hoge1.txt">file:///C:\temp24\hoge1.txt</a><br> ↑のファイルがあるフォルダを開くなら<a href="file:///C:\temp24\">こちら</a></p> :(中略) <p><a href="file:///C:\temp78\hoge15.txt">file:///C:\temp78\hoge15.txt</a><br> ↑のファイルがあるフォルダを開くなら<a href="file:///C:\temp78\">こちら</a></p> </body> </html> みたいに、ページを表示するたびに フォルダパスも記述されるという… JavaScriptで実現できますでしょうか？よろしくお願い致します。
- ベストアンサー
- JavaScript
- 入力された文字列からリンクタグを生成
お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ（ aタグ等 ）が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- innerHTMLを使ってID要素の内容を変えたい
innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか？ var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML; function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptの計算のNaNの判定について…
いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか？いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>
- ベストアンサー
- JavaScript
- javaの計算に関する質問です。
以下のプログラムで、画像の矢印のように処理ができたのですが、(4)と(5)の計算値などを用いて更に計算をするにはどう記述すればよいのですか？できれば画像の赤○で囲ったような感じで四則演算したいのですが…よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=100; } else { if (a==1 && b==2) { rslt1=90; } else { if (a==2 && b==1) { rslt1=80; } else { rslt1=70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=95; } else { if (a==1 && c==2) { rslt2=85; } else { if (a==2 && c==1) { rslt2=75; } else { rslt2=65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=60; } else { if (a==1 && d==2) { rslt3=50; } else { if (a==2 && d==1) { rslt3=40; } else { rslt3=30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select> <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> </body> </html>
- ベストアンサー
- Java
- 同じようなのばかりだ申し訳ないのですが…javaに関してです。
以下のようなプログラムを作成しました。３つのスクリプトを動作させたいのですがどうすればよいですか？また，画像のように(1)～(3)の和を算出するにはどうすればいいですか？助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>
- ベストアンサー
- Java
- getElementByIdの戻り値がnullになります。
getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。 以下のコードのどこがいけないのでしょうか。 --- <div id='a'></div> <script language="javascript">// <!-- var a_ = document.getElementById('a'); document.write(a_); // --></script> ---
- ベストアンサー
- JavaScript
- 折たたみメニューの表示・非表示
JavaScriptで下記のような折りたたみ（階層）メニューを作成しています。 <script type="text/javascript"> <!-- /* ブラウザ判別 */ var ie=document.all ? 1 : 0; var ns6=document.getElementById&&!document.all ? 1 : 0; var opera=window.opera ? 1 : 0; /* 子メニューの表示・非表示切替 */ function openFolder(childObj, parentObj){ var child=""; var parent=""; var sw="../../images/blanc.gif"; /* フォルダ表示時のアイコン画像 */ var hd="../../images/blanc.gif"; /* フォルダ非表示時のアイコン画像 */ if(ie || ns6 || opera){ child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style; parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj); if (child.display=="none"){ child.display="block"; parent.src=sw; }else{ child.display="none"; parent.src=hd; } } } //--> </script> <div id="open_1" style="display:none;"> <a href="01.html"><img src="images/list_01.gif"></a><br> <a href="02.html"><img src="images/list_02.gif"></a><br> </div> <div id="open_2" style="display:none;"> <a href="03.html"><img src="images/list_03.gif"></a><br> <a href="04.html"><img src="images/list_04.gif"></a><br> </div> <div id="open_3" style="display:none;"> <a href="04.html"><img src="images/list_03.gif"></a><br> <a href="05.html"><img src="images/list_04.gif"></a><br> </div> ここで、<div id="open_1">内のリンクをクリックして01.htmlに遷移した際、01.htmlでも<div id="open_1">内の階層が表示されているようにしたいのです（下のふたつの階層についても同じです）。 過去ログなどを調べまして、 <script type="text/javascript"><!-- function keepOpen(){ document.getElementById('x').style.display = "block"; document.getElementById('y').style.display = "block"; }keepOpen(); //--></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません（また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません）。 お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- if構文
初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名（うさぎ・とり）を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
できました、できました！ どうもありがとうございました。 大変助かりました。