JavaScript/複数のテキストボックス入力後、それぞれ表示させる

Question

前提・実現したいこと

1枚のページ内で、複数のテキストボックスなどから成り立つフォームに入力したものを補足文言を足して表示させる（表示させた後はコピーして別のソフトの入力欄に簡単に貼り付けたい）

発生している問題・エラーメッセージ

複数の結果を一度に出したいのに最後の1つだけ表示されてしまう

該当のソースコード

name:<input type="text" value="" id="text1" maxlength="5" />
trouble:<input type="text" value="" id="text2" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtn1()" />
<hr>

<p>取得した値：<span id="span1"></span></p> <p>取得した値：<span id="span2"></span></p> <script> function clickBtn1() { const t1 = document.getElementById("text1").value; document.getElementById("span1").textContent = t1; } function clickBtn1() { const t2 = document.getElementById("text2").value; document.getElementById("span2").textContent = t2; } </script>

解決方法のご教示願います。

Answer 1

（同じスコープ内で）同じ名前の関数は宣言できません
関数名を変えるて両方呼ぶか、同じ関数内にまとめるかが妥当でしょう

Comments

[eri]

基本的なところだったようで、すみません。HTMLとCSSはよくわかるのですが、javascriptはわかりにくくて覚えるのが難しいです。

Answer 2

name:<input type="text" value="" id="text1" maxlength="5" />
trouble:<input type="text" value="" id="text2" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtn1()" />

<hr> <p>取得した値：<span id="span1"></span></p> <p>取得した値：<span id="span2"></span></p> <script> function clickBtn1() { const t1 = document.getElementById("text1").value; document.getElementById("span1").textContent = t1;

const t2 = document.getElementById("text2").value;
document.getElementById("span2").textContent = t2;
}
</script>

で解決しました、失礼いたしました。

Comments

[yambejp]

問題文もそうですが、ソースを提示するときはマークダウンしてください

[eri]

もうしわけございません。