質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1639閲覧

javascriptで指定した文字列を別のjsファイルで置換してHTMLに反映させたい

michiaki

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/08/14 05:22

編集2016/08/15 10:26

###前提・実現したいこと
次に問題文や解答に表示する文字列に読み方やヒントなどを置換させて、表示することをしていますがなかなかうまくいきません。

回答ボタンを押し、正解か不正解を表示した後に、次の問題を表示するのですが、test_1.jsにある配列のデータを
読み込んだ時に同時にキーワードを置換したいです。
処理はmain.jsで行ってます。置換処理はobject_replace.jsで行ってます。

test_1.js(問題文) object_replace.js(置換文字列)
| |
↓ ←-------------
main.js(問題出題DOM含む)

index.html

文字の置換や問題文・解答について例えばこういう時はCSVファイルで作ったほうがいいよ等のアドバイスも頂けたら幸いです。

###発生している問題・エラーメッセージ

エラーは今のところはなし。 たぶん配列オーバーしている箇所があり、強制終了してしまうところありますが、質問に関係はないと思います。

###該当のソースコード

--html-- <script type="text/javascript" src="test_1.js"></script> <script type="text/javascript" src="object_replace.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <div> <h1>問題集1</h1> <p id="que">ここに問題が表示されます</p> <div> <input id="choice1" type="radio" name="choice">○○○<br></div> <div> <input id="choice2" type="radio" name="choice">×××</div> <div> <input type="button" value="回答する" onclick="button_click();"></div> <p id="answer"></p> <p id="last"></p> </div> <footer><a href = "index.html">最初へ</a></footer> </body> </html>
--main.js-- var i = 0; window.addEventListener("load",function() { show_question(0); },false); //終了処理 function end_study(i){ document.getElementById('que').innerHTML ="問題はすべて終了しました!!"; document.getElementById('choice1'). nextSibling.nodeValue="全問終了"; document.getElementById('choice2'). nextSibling.nodeValue="全問終了"; document.getElementById('answer').innerHTML =""; document.getElementById('last').innerHTML ="疲れるので休憩を取りましょう!!"; console.log(i); } //問題取り込み function show_question(i) { keyword_replace(i); document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む document.getElementById('choice1').nextSibling.nodeValue = exac_a[i];//同上 document.getElementById('choice2').nextSibling.nodeValue = miss_a[i];//同上 //document.querySelector('label[for="choice1"]').innerHTML="選択肢B"; } //回答後の処理 function button_click() { document.getElementById('answer').innerHTML =""; var radio = document.getElementById('choice1'); if(radio.checked) { document.getElementById('answer').innerHTML ="正解"; }else { document.getElementById('answer').innerHTML ="間違い"; } i++; //問題文を一つずらす。 show_question(i); if(i>=5){ end_study(i); i = 0; } }
-- object_replace.js -- //置換文字列候補 var keyword = { 徐行:"徐行(すぐに停止できる速度)", 車両横断禁止:"車両横断禁止(しゃりょうおうだんきんし)", 緊急自動車:"緊急自動車(きんきゅうじどうしゃ:パトカー、救急車、消防車)" }; var str_exca_a =new String(); var str_miss_a = new String(); var i = 0; function keyword_replace(i) { var str_q = q[i]; 問題・回答にキーワードが含まれていれば置換 q[i] = str_q.replace("徐行",keyword.徐行); q[i] = str_q.replace("車両横断禁止",keyword.車両横断禁止); q[i] = str_q.replace("緊急自動車",keyword.緊急自動車); console.log("q[i]:"+q[i]); var str_exac_a = exac_a[i]; exac_a[i] = str_exac_a.replace("徐行",keyword.徐行); exac_a[i] = str_exac_a.replace("車両横断禁止",keyword.車両横断禁止); exac_a[i] = str_exac_a.replace("緊急自動車",keyword.緊急自動車); var str_miss_a = miss_a[i]; miss_a[i] = str_miss_a.replace("徐行",keyword.徐行); miss_a[i] = str_miss_a.replace("車両横断禁止",keyword.車両横断禁止); miss_a[i] = str_miss_a.replace("緊急自動車",keyword.緊急自動車); }
--test_1.js-- //問題文を配列化して格納 var q = new Array(); var miss_a = new Array(); var exac_a = new Array(); q[0] = "1:交差点内を通行しているとき、緊急自動車が近づいてきたので直ちに交差点内で停止した。"; exac_a[0] = "緊急自動車が入ってきた場合の交差点内での停止は事故を起こす可能性が高まるので、交差点を避け、事故の起こりにくい道路の左側に寄って一時停止をする"; miss_a[0] = "交差点内を通行しているとき緊急自動車が近づいてきたので直ちに交差点内で停止した"; q[1] = "2:原動機自転車においてブレーキをかける場合は、ハンドルを切っていない状態で車体が傾いていないときには前後輪のブレーキを同時にかけるのがよい。"; exac_a[1] = "前後輪のブレーキを同時にかけるのが基本であるので、転倒の危険が問題がない場合は、ブレーキは同時にかけるべきである。"; miss_a[1] = "ブレーキの前後輪の同時使用は、条件を満たした場合にかけるのが、基本であるが危険時だけであり、極力使用せず、基本的には後輪のみのほうがよい。"; q[2] = "3:車両横断禁止の標識があったが道路の左側にある自分の車庫に入るため左に横断した。"; exac_a[2] = "左折を伴う道路の横断は、道路交通法上認められています"; miss_a[2] = "車両横断禁止の標識がある場所では、横断が禁止である。"; q[3] = "4:黄色の杖を持っている歩行者がいるときは、必ず警音器を鳴らさなければならない"; exac_a[3] = "杖使用者は弱視又は全盲者が用いるため、急な対応が難しく警音器のみの警告ではなく、一時停止か徐行(すぐに停止できる速度)を行う。"; miss_a[3] = "黄色の杖を持つ歩行者には、最大限注意を促す必要があるため、警音器まで鳴らすべきである。"; q[4] = "5.上り坂の頂上付近徐行の標識がなくても徐行しなくてはならない。"; exac_a[4]= "標識がなくても元々見通しが悪いため、徐行しなければならない"; miss_a[4]= "標識がないので、必ずしも徐行する必要がない";

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/14 05:28

コードはファイルごとにコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
gaogao_9

2016/08/14 11:05 編集

現状のコードに対してどのような処理をさせたいのかが分からず、指摘しかねます。 たとえば、 「現状ではキーワードに対して置換処理を行っています」 に対して、 「これをマウスオーバーで表示できるようにしたいです」 等、具体的な目標がなければ、こちらとしても解決方法を提示することが出来ません。
michiaki

2016/08/15 23:34

keywordの一つ目はきちんと動作していますが、2つ目以降はうまく動作していません。考え方は間違って無さそうなんで、もう少し考えてみます。
michiaki

2016/08/16 01:25

試しに第一問目に別のkeywordを入れても、それが変換されず、一番下の緊急自動車のみが置換されています。私の考えていることでは、問題文にいくつもkeywordが存在しても、全て置換できるようにしたいです。console.logにてキーワードの取得はできています(console.log(keyword.徐行)にて値は確認出来てます。)
guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/d5mfkcyu/1/

JavaScript

1q[i] = str_q.replace("徐行",keyword.徐行); 2q[i] = str_q.replace("車両横断禁止",keyword.車両横断禁止); 3q[i] = str_q.replace("緊急自動車",keyword.緊急自動車); 4```5```JavaScript 6str_q = str_q.replace("徐行",keyword.徐行); 7str_q = str_q.replace("車両横断禁止",keyword.車両横断禁止); 8str_q = str_q.replace("緊急自動車",keyword.緊急自動車); 9q[i] = str_q; 10```こう。 11 12--- 13 14 15`keyword.車両横断禁止` のように日本語は使えますが、あまりお勧めはしません。 16 17> こういう時はCSVファイルで作ったほうがいいよ 18 19JSONで検索してみてください。

投稿2016/08/16 03:54

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michiaki

2016/08/16 04:00

回答ありがとうございます。 連想配列に日本語を使用しているのは、今後このキーワードを増やしていく際に別の人にやってもらう想定でわかりやすいかなと思ってやってみました。もっと他にいい方法が無いか考えてみます。JSONというのは聞いたことがありますが、検索してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問