htmlのformからjavascriptへ文字を渡してhtmlのtableに表示する

html

htmlでフォームとテーブルを作成し、フォームの値（text)をjavascriptへ渡してhtmlでtableに返します。

↓

form

<form name = "form">
<input type="text" name="txtb" id="textid">
<input type="button" value="君に決めた！" onclick="tbox1()">
</form>

table

<!-- テーブル実装 -->
    <table class = "Table">
      <tbody>
        <tr>
            <th scope="row">項目名</th>
            <td> <div id="textoutput"></div> </td>
        </tr>
    </tbody>
        </table>

Javascript

script

//textboxの文字を取得する
function tbox1(){

str1 = document.form.txtb.value;

console.log(str1);


var x = document.getElementById('textid').value;
  numx = parseInt(x);
  numx = numx + 1;
  document.getElementById('textoutput').innerHTML = x;

};

参考

formからjavascriptへ値を渡してhtmlで表示する

関連

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！