FlintSable
11/10/2017 - 9:18 PM

Javascript DOM

AJAX.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <title>AJAX with JavaScript</title>
  <script>
  // create the http request object
  var xhr = new XMLHttpRequest();
  // create call back function
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      document.getElementById('ajax').innerHTML = xhr.responseText;
    }
  };
  // open the request
    xhr.open('GET', 'sidebar.html');
    function sendAJAX(){
      // send the request
      xhr.send();
      document.getElementById('load').style.display = "none";
    }
  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Bring on the AJAX</h1>
            <button id="load" onclick="sendAJAX()">Bring it!</button>
          </div>
          <div id="ajax">

          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
JSClickFunction.js
content_copyfile_download
const login = document.getElementById('login');
const loginMenu = document.getElementById('loginMenu');

login.addEventListener('click', () => {
  if(loginMenu.style.display === 'none'){
    loginMenu.style.display = 'inline';
  } else {
    loginMenu.style.display = 'none';
  }
});