デモンストレーション用にログインフォームをJavaScriptで実装しよう

<div class="p-loginSection">

  <div class="p-loginForm__messageLogout">
    <p>ログアウトしました。</p>
  </div>

  <p class="p-loginForm__message">ログインIDとパスワードを入力して、「ログイン」ボタンをクリックしてください。</p>

  <form action="./" class="p-loginForm__form">
    <div class="p-loginForm__container">
      <div class="p-loginForm__item p-loginForm__item--error">
        <p>ログインID、または、パスワードが正しくありません。</p>
      </div>
      <div class="p-loginForm__item">
        <div class="p-loginForm__label">ログインID</div>
        <div class="p-loginForm__inputText"><input id="inputName" type="text"></div>
      </div>
      <div class="p-loginForm__item">
        <div class="p-loginForm__label">パスワード</div>
        <div class="p-loginForm__inputText"><input id="inputPassword" type="password"></div>
      </div>
    </div>
    <div class="p-loginForm__submit">
      <input type="submit" class="c-button--submit01" value="ログイン">
    </div>
  </form>
</div>

document.addEventListener('DOMContentLoaded', function() {
  // ここに処理を書く
});

// フォーム要素を取得
var formElement = document.querySelector('.p-loginForm__form');

// エラーメッセージの要素を取得
var errorElement = document.querySelector('.p-loginForm__item--error');

// ログアウトメッセージの要素を取得
var logoutElement = document.querySelector('.p-loginForm__messageLogout');

// ログインID入力欄の要素を取得
var loginId = document.getElementById('inputName');

<a href="login.html?status=logout">ログアウトする</a>

var urlParams = window.location.search;

var params = urlParams.substring(1);

var array = params.split('=');

var params = window.location.search.substring(1).split('=');

if ( params[1] === 'logout' ) {
  logoutElement.style.display = 'block';
}

if ( params[1] === 'logout' ) {
  logoutElement.style.display = 'block';
} else {
  logoutElement.style.display = 'none';
}

formElement.addEventListener('submit', function(){
  // ここに処理を書く
}, false);

formElement.addEventListener('submit', function(event){
  event.preventDefault();

  // ここに処理を書く
}, false);

if ( loginId.value ) {

} else {
  // 未入力だった場合、エラーメッセージのスタイルを変更して表示
  errorElement.style.display = 'block';
}

if (loginId.value === 'admin' ) {
  window.location.href = 'admin.html';
} else if (loginId.value === 'guest' ) {
  window.location.href = 'guest.html';
} else {
  errorElement.style.display = 'block';
}

document.addEventListener('DOMContentLoaded', function () {
  var formElement = document.querySelector('.p-loginForm__form');
  var errorElement = document.querySelector('.p-loginForm__item--error');
  var logoutElement = document.querySelector('.p-loginForm__messageLogout');
  var loginId = document.getElementById('inputName');

  var params = window.location.search.substring(1).split('=');

  if (params[1] === 'logout') {
    logoutElement.style.display = 'block';
  } else {
    logoutElement.style.display = 'none';
  }

  formElement.addEventListener('submit', function (event) {
    event.preventDefault();
    if (loginId.value) {
      if (loginId.value === 'admin') {
        window.location.href = 'admin.html';
      } else if (loginId.value === 'guest') {
        window.location.href = 'guest.html';
      } else {
        errorElement.style.display = 'block';
      }
    } else {
      errorElement.style.display = 'block';
    }
    return false;
  }, false);
});