JavaScript input要素のtype属性を変更するサンプル

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

構文
1.ボタンのonclickイベントの定義
document.getElementById('ボタンのid名’).onclick = function() {処理コード}
2.input要素のtype属性を変更します。
const 変数名= document.getElementById('セレクターID名’);
変数名.type = 変更値
typeプロパティを利用してinput要素のtype属性を変更します。

使用例

<!DOCTYPE html>
<html>
<body>

<input id="age" type="text" name="age"/><br/>
<input id="chk" type="button" value="変更" />

<script>
document.getElementById('chk').onclick = function () {

  const tt = document.getElementById('age')

  // コンソールに出力
  console.log(tt.type);

  // numberに変更
  tt.type = "number";

}
</script>

</body>
</html>

実行結果
ボタン「変更」を押すと、typeの属性がコンソールに表示されます。
text
再度ボタンを押すと、「number」が表示されます。

JavaScript

Posted by arkgame