Accessing server responses (with XMLHttpRequest)

Question

Finishing my first web development class, I decided to keep working on my group final to practice web development and learn new web development skills.

The gist of our final project website is that users are given check boxes that correspond to various "themes," and a request based on those user-selected themes is sent to the server. The server then uses this information to form a description, a large javascript string, which needs to be sent back to the client to be rendered for the user to read.

An example of how the website should work would be:

1. The user checks the "magical shop" and "general store" themes on the website.
2. The client detects this and sends a request to the server.
3. The server receives this request, sees what themes were checked, and then creates a randomized description that contains content from these two themes.
4. The server then sends the description back to the client as a response, where the client displays the description to the user.

In practice, the website is able to successfully complete steps 1-3, but not 4. Specifically, though the client is able to receive a response from the server, it's not displaying the response for some reason.

Originally, I tried using XMLHttpRequest.response (with this guide as a reference) to do step number 4, as XMLHttpRequest seemed a bit more compatible with browsers than Fetch , but I ended up simply using res.send(description) when I figured out that it was a much simpler way to get a response to the client.

Any pointers on what to fix to be able to display description without reloading the page are much appreciated. The website utilizes express, node.js, and handlebars. If more information is needed, or there is already a similar question with an answer, let me know and I'll make the respective adjustments to this post.

index.js (the script that the page runs):

function sendGenerateRequest() {
    
    /*...Code that detects and stores what themes were selected...*/
    var descriptionBox = document.getElementByClassName('description-box')

    if(themeType == "None" || (themes === undefined || themes.length < 1)) {
        alert("You have not chosen a theme")
    } else {
        var req = new XMLHttpRequest()
        var reqUrl = "/buildgen/newGen"
        console.log("== reqUrl:", reqUrl)

        req.open('POST', reqUrl)
            var reqBody = JSON.stringify(postContent)
            req.responseType = 'text'
            req.setRequestHeader('Content-Type', 'application/json')

        req.onload = function() {
            console.log("Response: ", req.response)
            /*descriptionBox is where response should appear*/
            descriptionBox.textContent = req.response
        }

        req.send(reqBody)
    }
    //location.reload();
}

rptools.js, the server side code that runs with node.js and express:

app.post("/buildgen/newGen", function(req,res,next) {

    /*...Code that creates the description string...*/

    console.log("Description: ", description)

    /*Send description as a response*/
    res.send(description)
})

console output (server side) when "General Shop Room" and "Magic Shop Room" are selected:

Request received:
        url:  /buildgen/newGen
        method:  POST
        headers:  {
  host: 'localhost:3000',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0',
  accept: '*/*',
  'accept-language': 'en-US,en;q=0.5',
  'accept-encoding': 'gzip, deflate',
  'content-type': 'application/json',
  'content-length': '68',
  origin: 'http://localhost:3000',
  dnt: '1',
  connection: 'keep-alive',
  referer: 'http://localhost:3000/buildgen'
}
== req.body: {
  themeType: 'Room',
  theme: [ 'General Shop Room', 'Magic Shop Room' ]
}
Description:
    Looking to the North end of the room...
        A large book rests upon a polished oak lecturn. The book details the magical items sold at the shop.
    In the East end of the room...
        There are wooden shelves filled with smoked fish and cured meats.
    Moving to the South end of the room...
        There is a wooden table. On it are large slices of cured meats.
    Investigating the West end of the room...
        There is a weapon halfway embedded in a stone. It is (fill in the blank)
    Observing the Center of the room...
        There is a oak service desk fitted with glass, allowing items to be placed and viewed from inside the desk. On top of the desk is a small copper bell with the words "ring for service" etched into it in common.

console output (client side) when "General Shop Room" and "Magic Shop Room" are selected:

== reqUrl: /buildgen/newGen index.js:235:11
Response:      
    Looking to the North end of the room...
    A large book rests upon a polished oak lecturn. The book details the magical items sold at the shop.
    In the East end of the room...
    There are wooden shelves filled with smoked fish and cured meats.

    Moving to the South end of the room...
    There is a wooden table. On it are large slices of cured meats.

    Investigating the West end of the room...
    There is a weapon halfway embedded in a stone. It is (fill in the blank)

    Observing the Center of the room...
    There is a oak service desk fitted with glass, allowing items to be placed and viewed from inside the desk. On top of the desk is a small copper bell with the words "ring for service" etched into it in common.
index.js:243:12

Edit: Screenshot showing the HTML element "textarea" I'm trying to change:

Answer 1

The problem is two things:

one, in my sendGenerateRequest function, I try to call document.getElementByClassName('description-box'). This function does not exist: you can only get an array of elements by class name, not an individual element by its class name. An easy solution around this (and the one that I used) is to add an id to the element you wish to grab and then use document.getElementById("my_id_string").

The second problem is that, as Barmar pointed out in a comment on the original post, if I have a <textarea> element, I should assign my text to textarea.value instead of textarea.textContent.