[JavaScript]htmlのformで入力させたテキストをtextarea内に表示させたい

やりたいこと

htmlのformに入力したテキストをそのままtextarea内に表示させたいが、jsとhtmlの連携方法がわからず、表示することが出来ない

htmlの画面

以下の写真のようにformで入力したテキストをボタンを押すとそのままtextareaに表示させるようにしたい。

ソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sample</title>

</head>
<body>
    <form name="form1" action="" method="post">
        <p>検索したいキーワードを入力してください。</p>
        <input type="search" name="search" placeholder="キーワードを入力">
        <input type="submit" name="submit" value="検索" onclick="return check();">
    </form>

    <p>表示</p>
    <textarea name="show" cols="30" rows="30"></textarea>


    <!-- 検索欄に対するアラート -->
    <script type="text/javascript">
        var input = document.form1.search.value();
        function check(){
            if (document.form1.search.value == "" || document.form1.submit.value == "") {
                alert("何か入力してください");
                return false;
            }
            else {
                var input = document.form1.search.vlaue();
                var text = document.form1.submit.value();
                input.innerHTML = "hello";
                console.log("hello");
                return true;
            }
        }

        // console.log(document.form1.search.value);
        document.write(input);
    </script>



    
</body>
</html>

最後に

ソースコードに関してところどころ私が試してみた内容がありますが気にしないでください。
いろいろ調べてみたのですが、innerHTMLとかで表示するという記事をよく見ました。
しかし、inputでとってきたvalueをtextarea内に表示というのはなかなか見つからずに苦労しています。

どうかアドバイスのほどよろしくお願いします。

行動規範の内容に同意します

回答2件

ちょっと全体的に書き方がおかしいので何をしたいのかよくわかりませんが

javascript
1<form method="post">
2<input type="search" name="search">
3<input type="submit" name="submit" value="検索">
4</form>
5<textarea name="show" cols="30" rows="30"></textarea>
6<script>
7window.addEventListener('DOMContentLoaded', ()=>{
8  document.querySelector('[type=submit]').addEventListener('click', (e)=>{
9    e.preventDefault();
10    var search = document.querySelector('[name=search]');
11    var show = document.querySelector('[name=show]');
12    if (search.value == "") {
13      alert("何か入力してください");
14    }else {
15      show.value=search.value;
16    }
17  });
18});
19</script>

投稿2020/11/21 09:57

yambejp

総合スコア116724

ベストアンサー

こんな感じでどうでしょう?

javascript
1function check(){
2	document.querySelector('textarea[name=show]').value = document.form1.search.value;
3	return false;
4}

投稿2020/11/21 08:24

gpsoft

総合スコア1323

oinari03

2020/11/21 09:20

ありがとうございます。ご提示していただいたように記述いたしましたら一瞬、textarea内に表示されるもののすぐに消えてしまいしまいます。どういった処理が必要になるのか教えていただけないでしょうか

oinari03

2020/11/21 09:24

すみません。以下のスリープを実装したところ解決しました。 // 例)2秒スリープさせる const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); await _sleep(2000);

gpsoft

2020/11/21 09:49

> 一瞬、textarea内に表示されるもののすぐに消えてしまいしまいます。検索ボタンの`type`が`submit`なので、フォームが送信されてしまってるんだと思います。 `check()`関数が`false`を`return`しとけば、フォームが送信されるのを回避できると思ったんですけど、不十分だったかな……。 `type`を`button`に変えても良ければ、それで解決すると思いますよ。

oinari03

2020/11/21 12:57

いえいえとても参考になりました。ありがとうございます。

行動規範の内容に同意します

あなたの回答