javascriptで、入力した数字をテキスト文に出力させる方法を教えてください。

前提・実現したいこと

質問失礼いたします。現在JavaScriptでプログラムをつくっているのですが、
3時間以上サイトで調べても、以下の2点ができず、大変困っています。どなたか解決していただけないでしょうか。

やりたいこと

数字だけが入るテキスト文に数字を入力して「計算する」ボタンを押すと、別のテキスト要素に入力された数字が反映されるようにしたい
複数の数字だけが入るテキスト文に入力したら、その和を別のテキスト要素に自動反映させたい。

指定HTMLソースコード

<form action="index.php" method="POST">
   <!--ここに数字を入力-->
   <div name="input-name1">
      <input type="number" name="input-number-name1"> 
   </div>
   <!--ここに数字を入力-->
   <div name="input-name2">
      <input type="number" name="input-number-name2"> 
   </div>
   <!--計算するボタン-->
　　<div name="button-name">
      <input type="submit" name="submit-name" value="計算する" onclick = "onClickButton();">
   </div>

   <!--計算するボタンを押すとここに数字を出力(入力された数字もしくは2つの数字の和)-->
   <div name="input-name">
      <input type="text" name="input-text-name"> 
   </div>
</form>

試したこと

まず、1つの数字を入力したら、テキストに出力できるかを確認したいので、
以下のように書いてみたのですが、うまくいきません。JavaScript初心者なので、どなたかお願いします。

function onClickButton() {
  var a1 = document.getElementsByName("input-number-name1")[0];
  var anew = a1.value;
  document.getElementsByName("input-text-name")[0].innerText = anew; //うまくいかない
}

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

回答2件

html
1      <input type="text" name="input-text-name">

<input>の値を変更するプロパティは innerText や textContent ではなく、value です。そこを直してもいいですが、そもそもこういう用途には <output> を使いましょう。

投稿2021/07/16 05:17

int32_t

総合スコア21695

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="index.php" method="POST">
        <!--ここに数字を入力-->
        <div>
            <input type="number" name="input-number-name1">
        </div>
        <!--ここに数字を入力-->
        <div>
            <input type="number" name="input-number-name2">
        </div>
        <!--計算するボタン-->
        <div>
            <input type="submit" name="submit-name" value="計算する">
        </div>

        <!--計算するボタンを押すとここに数字を出力(入力された数字もしくは2つの数字の和)-->
        <div>
            <output name="input-text-name" for="input-number-name1 input-number-name2"></output>
        </div>
    </form>
    <script>
        const form = document.getElementsByTagName("form")[0];
        const num1 = document.getElementsByTagName("input")[0];
        const num2 = document.getElementsByTagName("input")[1];
        const submit = document.getElementsByTagName("input")[2];
        const answer = document.getElementsByTagName("output")[0];

        submit.addEventListener("click", () => {
            event.preventDefault();
            if(num1.value !== "" && num2.value !== "") {
                answer.value = Number(num1.value) + Number(num2.value);
            }
        });
    </script>
</body>

</html>

投稿2021/07/16 05:38