Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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で表示する

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away