1

ユーザーがテキスト領域に入力した内容をタグにコピーしたいのです<p>が、うまくいきません。ユーザーが保存ボタンをクリックすると、テキストが<p>タグに表示されます。

これが私のコードです：

<div>
        <div>
            <h2>You are to write your tought here in this test box and click save</h2>
            <label for="heiku" class="label">Your Heiku</label>
            <br />
    
            <textarea class="textarea" id="heiku" name="heiku" rows="4" cols="50">
                Write your Heiku here
            </textarea>
            <button class="button" id="submit" Onclick="Save()">Save</button>
    
            <p class="p" id="heiki_input"></p>
    
    
        </div>
    </div>
    
    <script>
        let heiku = document.getElementById("heiku").value;
        let heiku_input = heiku
    
        function save(){
            
            document.getElementById("heiku_input").innerText = heiku_input;
            console.log(heiku_input);
        }
    </script>

4

2 に答える 2

1

コードでエラーを解決する

コードにいくつかのタイプミスがありました

  1. Onclickイベントリスナーは、次のように簡単な文字にする必要がありますonclick

  2. 関数は名前が JavaScript のように定義され ているため、HTML でsave使用できます。onclick="save()"

  3. スクリプトの先頭で関数外の値を取得すると、変数textareaには の初期値のみtextareaが代入されheikuます。textareaユーザーがボタンをクリックした後の値を取得するには、移動する必要があります

    let heiku = document.getElementById("heiku").value;save関数 に。

修正されたコードは次のようになります...

<div>
    <div>
        <h2>You are to write your tought here in this test box and click save</h2>
        <label for="heiku" class="label">Your Heiku</label>
        <br />

        <textarea class="textarea" id="heiku" name="heiku" rows="4" cols="50">
            Write your Heiku here
        </textarea>
        <button class="button" id="submit" onclick="save()">Save</button>

        <p class="p" id="heiku_input"></p>


    </div>
</div>

<script>
    function save(){
        let heiku = document.getElementById("heiku").value;
        let heiku_input = heiku
        document.getElementById("heiku_input").innerText = heiku_input;
        console.log(heiku_input);
    }
</script>

望ましい結果を達成する

  • ただし、上記のコードでは、探していた正確な結果が得られない場合があります。HTMLのタグに挿入された最初のテキストtextareaも、デフォルトでその値としてカウントされます。内部に挿入した最初のテキストをtextareaプレースホルダーとして表示するには、それを placeholder属性に含めることができます。

  • textareaまた、一度変数に の値を代入してからheiku再度 に代入heikuする理由もわかりませんheiku_input。の値を使用してより多くのアクションを実行したい場合は、単に の値のみをtextarea割り当てることができます。textareaheiku

  • コードをES6標準に近づけるために、 を使用して関数constを定義し、フィールドの値を に代入する代わりにを使用できます。使用方法について詳しくは、こちらをご覧ください。saveconstlettextareaheiku_input

使用するのに適したスニペットを次に示します。

<div>
  <div>
    <h2>You are to write your tought here in this test box and click save</h2>
    <label for="heiku" class="label">Your Heiku</label>
    <br />

    <textarea class="textarea" id="heiku" name="heiku" rows="4" cols="50" placeholder="Write your Heiku here"></textarea>
    <button class="button" id="submit" onclick="save()">Save</button>

    <p class="p" id="heiku_input"></p>


  </div>
</div>

<script>
  const save = () => {
    const heiku = document.getElementById("heiku").value;
    document.getElementById("heiku_input").innerText = heiku;
    console.log(heiku);
  }
</script>

于 2021-08-18T04:17:29.830 に答える