JavaScript AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

Ben Ahlander
Ben Ahlander
7,528 Points

Why is my button not working?

<!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>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if(xhr.readyState === 4) {
        document.getElementById('ajax').innerHTML = xhr.responseText;
      }
    };
    xhr.open ('GET', 'sidebar.html');
    function sendAJAX() {
      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()">Bringit!</button>
          </div>
          <div id="ajax">

          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

1 Answer

Huy Bui
Huy Bui
13,329 Points

Hey Ben,

Looks like the problematic code is in your 'sendAJAX' function declaration. Just need to add a period to fix the method chaining:

document.getElementById('load').style.display = "none";

Hope this helps,