「JavaScript」getElementsByNameで指定属性の値を取得、設定する

2020年2月20日2021年8月24日

書式
変数名 = document.getElementsByName(属性名);
変数名[0].value===xxx
変数名[0].style.background=xxx
使用例

<script>
  function funcA() {
  　　/*属性usernameの値を取得*/
    const uname = document.getElementsByName("username");

    if (uname[0].value === "user01") {
      /*値を変更*/
      uname[0].value = "AA";
      /*背景色変更*/
      uname[0].style.background = "red";
    } else {
    /*値を変更*/
      uname[0].value = "BB";
      /*背景色変更*/
      uname[0].style.background = "green";
    }
  }
</script>

<p><input type="text" name="username"  placeholder="名前を入力してください"/></p>
<p><input type="button" value="変更" onclick="funcA()" /></p>