0

このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。

var textForm1 = document.getElementById("textForm1").value;

var tf1 = document.getElementById("tf1");
tf1.value = textForm1;
3
  • 可能です。たぶん求める答えは違うのでしょうが、可能か否かとしか聞いてないのでそういう答えになります。
    – WebSurfer
    Commented 2023年5月5日 22:04
  • WebSurferさんも少し指摘されていますが、プログラミング以前に小学校の国語の問題として「可能でしょうか。」という問いに対する答えは「可能です」/「不可能です」ぐらいにしかなりません。そのような答えを求めているのでしょうか? 別の回答を求めているのであれば、質問文自体が不適切です。答えて欲しい内容を尋ねるようにしてください。
    – sayuri
    Commented 2023年5月6日 1:21
  • 1
    質問の修正を求めること自体はいいのですが、「小学校の国語の問題」発言はただの煽りですね。。。こういうのはよくありません。
    – dameo
    Commented 2023年5月7日 6:56

5 件の回答 5

1

このような感じで複数のテキストボックスに入力した値を別の複数のテキストボックスに代入することは可能でしょうか。

上のコメントにも書きましたが、可能です。

できなかったと言ってる人がいるので証拠を。

以下のコードで、

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            var textForm1 = document.getElementById("textForm1").value;

            var tf1 = document.getElementById("tf1");
            tf1.value = textForm1;
        });
    </script>
</head>
<body>
    <input id="textForm1" type="text" value="textForm1 の value"/>
    ⇒
    <input id="tf1" type="text" />
</body>
</html>

結果は以下の通りとなります。

画像の説明をここに入力

できなかったとすると、タイミングの問題では?(JavaScript のコードが動く時は input type="text" 要素の DOM がまだ生成されてないとか)

0

何を求めているのか謎なので、何を答えるべきかわかりませんね。type="module"と書くのも一つの答えになりますでしょうか。

<script type="module">
  var textForm1 = document.getElementById("textForm1").value;
  var tf1 = document.getElementById("tf1");
  tf1.value = textForm1;
</script>

<input id="textForm1" type="text" value="textForm1 の value">
⇒
<input id="tf1" type="text">

0

index.htmlとmain.jsを同じフォルダに置き、index.htmlをクリックして開きます。
インプットボックスの01に文字列を入力するか変更し、Enterキーを押すかマウスでどこかをクリックすると、同じ文字列が02と03にもコピーされます。

<!-- index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='https://code.jquery.com/jquery-3.3.1.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
  <script src='./main.js'></script>
  <title>Text copy</title>
</head>
<body>
  <label for='01'>01</label>
  <input type='text' id='01'><br>
  <label for='02'>02</label>
  <input type='text' id='02'><br>
  <label for='03'>03</label>
  <input type='text' id='03'><br>
</body>
</html>
// main.js
'use strict';

$(() => {
  $('#01').on('change', () => {
    $('#02').val($('#01').val());
    $('#03').val($('#01').val());
  });
});
-1

一応これで行けるみたいですが、なんで一旦変数に代入すると動かなくなるのかはよくわからないです。

    var textForm1=document.getElementById("textForm1").value;
    var tf1=document.getElementById("tf1").value=textForm1;
1
  • あれ、一旦変数に代入しても動くみたい?さっき動かなかったんだけどな?すいません出直してきます。
    – Jogenara
    Commented 2023年5月5日 23:21
-2

回答ではありません

多分質問にはHTML全体を貼った方がいいですよ。
以下は代入できない例です。
質問編集のご参考までに。

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

<head>
  <meta charset="utf-8">
  <script>
    var textForm1 = document.getElementById("textForm1").value;
    var tf1 = document.getElementById("tf1");
    tf1.value = textForm1;
  </script>
</head>

<body>
  <form>
    textForm1:<input id="textForm1" type="text" value="ほげ">
    tf1: <input id="tf1" type="text">
  </form>
</body>

</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。