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

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

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

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

Q&A

1回答

792閲覧

submitを押したのち、javascriptで特定の場所に文字を表示させようとしています。

masahumi

総合スコア10

JavaScript

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

0グッド

0クリップ

投稿2019/02/13 10:03

前提・実現したいこと

javascriptの初心者です。
submitを押したら、特定の個所に文字が
表示されるようにしようとしています。

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

現在、下記のソースコードで実現しようとしているのですが、
id="search_word"の個所が一瞬表示されてすぐに消えてしまいます。

検索フォームに入力した文字が、id="search_word"の個所に
固定して表示されるようにするにはどうしたらよいのでしょうか?

該当のソースコード

<script> function searchClick() { document.getElementById("search_word").innerHTML = "「〇〇」の検索結果を"; }; </script> <body> <div id="search"> <form method="get" action="/testtest/sc/list/"> <input type="hidden" name="suggest" id="suggest" value="on"> <input class="search_text_input" type="text" placeholder="検索内容を入力" name="word" value="" autocomplete="off" style="height:30px; width:70%; text-indent:0.5em; border:solid 1px #CACACA;border-radius: 5px;-webkit-border-radius: 5px;-webkit-appearance: none;"> <input type="submit" value="検索" onclick="searchClick();" id="search_input" style="height:30px;width: 25%;border:solid 1px #CACACA; color:#ffffff; padding:5px; font-weight:bold;background-color: #CACACA;border-radius: 5px;-webkit-border-radius: 5px;-webkit-appearance: none;"> </form> </div> <div class="search clearfix"> <span id="search_word"></span> <span class="search_item"> <span class="word_refine">絞り込む</span> </span> </div> </body>
javascript

試したこと

submitをbuttonに変えてみたのですが、今度は検索が動かなくなりました。
にっちもさっちもいかず、どうか助けてください。

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

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

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

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

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

m.ts10806

2019/02/13 10:12

検索で動作するプログラム言語は何でしょうか?
noka_blank

2019/02/13 10:17

> id="search_word"の個所が一瞬表示されてすぐに消えてしまいます。 formをsubmitして画面がリロードされるからではないでしょうか? 画面はリロードされていないという事でしょうか?
m.ts10806

2019/02/13 11:06

コードはマークダウンのcode機能を利用してご提示ください
x_x

2019/02/14 04:13

実際の検索処理はサーバー側で行っていると思いますが、そこで表示するわけにはいかないのでしょうか?
guest

回答1

0

例えばこう

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 if(word=location.search.match(/(?|&)word=(.+)(?=&|$)/)){ 4 document.querySelector("#search_word").textContent = "「"+decodeURIComponent(word[2])+"」の検索結果を"; 5 } 6}); 7</script> 8<form method="get"> 9<input type="hidden" name="suggest" value="on"> 10<input type="text" name="word" > 11<input type="submit" value="検索"> 12</form> 13<span id="search_word"></span> 14<span class="word_refine">絞り込む</span>

投稿2019/02/13 10:37

yambejp

総合スコア114572

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

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

yambejp

2019/02/13 10:38

結局jsで処理をしたあとにsubmitしたら次のページに飛んでしまうので 書き換えた文字がチャラになるという流れです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問