input#type(text)

type属性で"text"を選んだ場合は、テキスト入力が出来る。

<input> - フォーム部品:入力欄 - とほほのWWW入門

JavaScriptvalueの取得はやったけど、valueの代入はしてないからしてみる。

<html>
  <head>
    <title>input#type#text</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
    function clear(){
      var text1_list = document.getElementsByName("text1");
      var text1 = text1_list[0];
      text1.value = ""
    }
    function set(){
      var text1_list = document.getElementsByName("text1");
      var text1 = text1_list[0];
      var text2_list = document.getElementsByName("text2");
      var text2 = text2_list[0];
      text2.value = text1.value;
    }
    // -->
    </script>
    <input name="text1" type="text" value="abcde">
    <input name="clearBtn" type="button" value="clear" onclick="clear()">
    <input name="text2" type="text" value="">
    <input name="setBtn" type="button" value="set" onclick="set()">
  </body>
</html>

clearBtnを押すと、clear()が実行されて、text1.valueにデフォルトでセットされている"abcde"が空になる。
setBtnを押すと、set()が実行されて、text2.valueにtext1.valueの値がセットされる。

最初はこう
最初はこう

最初はこう。
clearを押す。

あれ?空にならない?
あれ?空にならない?

あれ?空にならない?

setボタンを押すと、text2にも反映されるのに。
setボタンを押すと、text2にも反映されるのに。

setボタンを押すと、text2にも反映されるのに。
調べると、

Is "clear" a reserved word in Javascript? - Stack Overflow

マジか・・・。Document.clearが存在するからか・・・。

そこで関数名を変えた。

最初はこう
最初はこう

最初はこう。

空になった
空になった

clearで空になった。

今度はxyzを入力
今度はxyzを入力

今度はxyzを入力。

setで右にも反映
setで右にも反映

setで右にも反映。

左を消して
左を消して

clearで左を消して。

setで右も消えた
setで右も消えた

setで右も消えた。

Sample/html/input/type_text/src/input at master · bg1bgst333/Sample · GitHub