jsでtextarea 内に入力された数値を取得し、計算した結果を出力するにはどうすればよいでしょうか

Question

一行目のtxtarea内に数値(体重)を入力し、「target」ボタンを押すと計算結果(体重*２)が三行目のtextarea内に表示されるようにしたいのですがどうすればよいでしょうか。
また、ボタンではなく一行目に体重を入力し「Enter」を押すと計算結果が三行目のtextareaに表示する方法もあれば知りたいです。

以下サンプルコードです。

<style>
  textarea {
    resize: none;
    overflow: hidden;
  }
  .weight {
    padding-top: 80px;
    text-align: center;
    letter-spacing: 8px;
  }
  .weight2 {
    text-align: center;
    letter-spacing: 8px;
  }
  .weight textarea{
    background-color: white;
    width: 20px;
    height: 18px;
  }
  .weight2 textarea{
    background-color: white;
    width: 30px;
    height: 18px;
  }
  .target-button {
    text-align: center;
  }
  .enter {
    margin: 0px;
    height: 25px;
    width: 50px;
    border-radius: 3px;
  }
</style>

<div class="weight">
  <p>私の体重は<textarea class="kg" maxlength="2"></textarea> ㎏です</p>
</div>
<div class="target-button">
  <button type="button" name="button" class="enter">target</button>
</div>
<div class="weight2">
  <p>目標摂取量は<textarea class="target-item" maxlength="3"></textarea> ｇ</p>
</div>
<script type="javascript">

</script>

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[satskuki32]

ご指摘ありがとうございます。

Answer 1

$('button[name="button"]').click(function() {
  $('textarea.target-item').val($('textarea.kg').val()*2);
});

まず試したことをご記載ください。

Comments

[satskuki32]

回答とご指摘ありがとうございます。試したことが説明できるようコードを整理して改めて質問したいと思います。

Answer 2

はじめに、ご回答・ご指摘いただきました皆様ありがとうございました。最適で分かりやすいコードの書き方、参考になりました。今回、自己解決しましたので自分なりの解決方法を投稿いたします。

targetボタンクリックによる実行

①.enter要素のclickイベントの作成
②clickイベント内で、変数weightを定義し、.kg要素に記入されている値を代入。
③変数targetに変数weigthを用いて計算式を代入。
④.target-item要素よりtextareaへtargetを出力。

Enterキーによる実行

①.kg要素のkeypressイベントの作成
②Enterキーが押されたときにプログラムが実行されるif文の作成
③if文内に実行したいプログラムを書く

<style>
  textarea {
    resize: none;
    overflow: hidden;
  }
  .weight {
    padding-top: 80px;
    text-align: center;
    letter-spacing: 8px;
  }
  .weight2 {
    text-align: center;
    letter-spacing: 8px;
  }
  .weight textarea{
    width: 20px;
    height: 18px;
    text-align: right;
  }
  .weight2 textarea{
    width: 30px;
    height: 18px;
    text-align: right;
  }
  .target-button {
    text-align: center;
  }
  .enter {
    height: 25px;
    border-radius: 3px;
  }
</style>

<div class="weight">
  <p>私の体重は<textarea class="kg" maxlength="2"></textarea> ㎏です</p>
</div>
<div class="target-button">
  <button type="button" name="button" class="enter">target</button>
</div>
<div class="weight2">
  <p>目標摂取量は<textarea class="target-item" maxlength="3"></textarea> ｇ</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  //targetボタンクリックによる実行

  $(".enter").click(function(){
    var weight = $(".kg").val();
    var target = weight*2;
    $(".target-item").text(target);
  });

　//Enterキーによる実行
  $(".kg").keypress(function(e) {
  if(e.which == 13) {
    var weight = $(".kg").val();
    var target = weight*2;
    $(".target-item").text(target);
  }
  });
</script>