Node.js element selection and modification

Question

I want to build a fantasy league draft application to practice JavaScript and Node.js. I have managed to include my html file using node.js but I can't modify the contents of my html document since I cant use document.getElementById or any other similar methods on the file called by node.

<!DOCTYPE html>
<html>
  <style>
    h1 {
    width: 100%;
    text-align: center;
    }

    ul {
    text-decoration: none;
    list-style: none;
    }

    .team {
    width: 200px;
    margin: 10px;
    float: left;
    text-align: center;
    }

    button {
    margin-right: 30px;
    margin-top: 5px;
    width: 100px;
    height: 50px;
    background-color: #7A95C8;
    border-radius: 10px;
    }
  </style>
<head>
    <meta charset="utf-8">
</head>
<body>
  <h1>Fantasy Premier League Draft</h1>
  <div id="arsenal" class ="team">
    <h2> ARSENAL </h2>
      <ul><form method="post" action="/">

            <li><button class='normal' type='submit' formmethod="post" name='Mathieu Debuchy'>Mathieu Debuchy</button></li>
            <li><button class='normal' type='submit' formmethod="post" name='Keiran Gibbs'>Keiran Gibbs</button></li>
            <li><button class='normal' type='submit' formmethod="post" name='Pat Mertesacker'>Pat Mertesacker</button></li>
            <li><button class='normal' type='submit' formmethod="post" name='Gabriel Paulista'>Gabriel Paulista</button></li>

          </form>
        </ul>
  </div>
</body>
</html>

var http = require('http');
var fs = require('fs');
var querystring = require ("querystring");

http.createServer(function (request, response) {
        response.writeHead(200, {'Content-Type': 'text/html'});
        display(response);
        home(request, response);
        response.end();

}).listen(3000);
console.log('Server running at http://<workspace-url>/');

function display(response) {
  var fileContents = fs.readFileSync("./index.html", {encoding: "utf8"});
  response.write(fileContents);
}

function home(request, response) {
         request.on("data", function (postBody) {
         console.log(postBody.toString());
         var query = querystring.parse(postBody.toString());
         response.end();
        });     
      }

What i want to do is:

1) to change the class of a button if it has been clicked by a user, 2) to disable that button and 3) to store the information about which button has been clicked into an array.

I have problems using a click event handler in node.js. Any help would be greatly appreciated.

Welcome to the Treehouse Community

Looking to learn something new?

Okan Taner

Okan Taner

Node.js element selection and modification