Node.js not rendering html page from 'public/views' route

Question

I am trying to render some html, after executing a xml http request from index.html, but the server is not rendering my html page, even if the log seems to work just fine:

<input type="button" id="response_2" value="No, let me create one :0" class="button" style="width: 100%; height: 100%" onclick="createAccount()">

This is the button found in the index.html

function createAccount()     {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "/createAccount");
    xhttp.send();
}

This is the javascript function. also found in the index.html file, which is executed when pressoing the 'response_2' button

    var express = require('express');
    var app = express();
    var http = require('http');
    var port = 3000;
    var bodyParser = require('body-parser');

    var httpServer = http.createServer(app);
    httpServer.listen(5500);

    app.use(express.static(__dirname + '/public'));
    app.set('views', __dirname + '/public/views');
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');

    app.use(bodyParser.urlencoded({
    extended: true
    }));
    app.use(bodyParser.json());

    app.listen(port, () => console.log(`app listening on port ${port}!`));

    app.get('/', function (req, res) {
        console.log("someone here...");
        res.render('index.html');
    });

    app.get('/createAccount', function (req, res) {
        console.log("here!");
        res.render('createAccount.html');
    });

    app.get('/login', function (req, res) {
        res.render('login.html');
    });

    app.get('/forgotCredentials', function (req, res) {
        res.render('forgotCredentials.html');
    });

This is the configuration of the node.js server

Answer 1

Your code

app.get('/createAccount', function (req, res) {
  console.log("here!");
  res.render('createAccount.html');
});

makes it so that when someone visits the /createAccount URL in their browser they'll see the page you've told the server to return. Your createAccount() function does not open this URL in the browser, it only makes the request to render that page, so the server returns the page but you never actually visit it.

Why don't you just use

<a href='/createAccount'>
  <button>No, let me create one :0</button>
</a>

in your page instead of that input element?

Answer 2

It seems to me that you are missing a bit of code.
In your client example you have the createAccount function which fires a XMLHTTPRequest to the server.

function createAccount() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "/createAccount");
    xhttp.send();
}

But it then misses the part what it should do with the response of the request. Add a onreadystatechange method to the xhttp instance like you see here below.

function createAccount() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if(xhttp.readyState === 4 && xhttp.status === 200) {
            console.log(xhttp.responseText);
        }
    }
    xhttp.open("GET", "/createAccount");
    xhttp.send();
}

The onreadystatechange will be called whenever the readyState of the request has changed. As described here on MDN. . From within the function you can control what has to be done with the result.

As far as I can tell from your code the console.log(xhttp.responseText); should output the createAccount.html page as a string.

My guess is that you should simply navigate to the /createAccount by using the href of a link.

<a href="/createAccount" title="Create account">Create account</a>