7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-03

昨晩ムカデ人間という映画を見て絶句しました。よければこっちで見ていただければ幸いです。

html

スクリーンショット 2017-04-03 13.28.57.png

        ↓

スクリーンショット 2017-04-03 13.28.21.png

form

index.html
<form name = "form">
<input type="text" name="txtb" id="textid">
<input type="button" value="決定!" onclick="tbox1()">
</form>

table

index.html

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

Javascript

script

script.js
//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で表示する

7
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?