Trying to add aditional comments

Question

So I've just started learning html and javascript and I'm trying to create a comment page. However I can only get the page to display one comment at a time and I would like to be able to add aditional comments. Can anyone please help?

Part of code used

JS:


function getUserInput(){
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var review = document.getElementById("review").value;
    document.getElementById("Reviews").innerHTML = name + " " + email + "   " + review;
}

html:

<div class="info">

    Name <input type="text" id="name" value="">
      Email <input type="text" id="email" value="">
      <br>

    <h2>Leave your Book Review...</h2>
    <textarea maxlength="150" rows="5" cols="50" wrap="hard" id="review">
</textarea>
<br> Remaining <span id="info"></span> characteres

    <button onclick="getUserInput()"> Leave Review</button>

    <hr>
</div>

    <div id="Reviews"></div>

score 1 · Answer 1 · answered Nov 20 '22 at 14:54

function getUserInput(){
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var review = document.getElementById("review").value;
    document.getElementById("Reviews").innerHTML += name + " " + email + "   " + review;
}

You should use innerHTML+= instead of innerHTML = .... That's your mistake.

score 0 · Answer 2 · answered Nov 20 '22 at 15:07

I would add an element for each review, something like this

function getUserInput(){
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var review = document.getElementById("review").value;
    const newReview = document.createElement("p");
    newReview.innerHTML = name + " " + email + "   " + review;
    const reviewsParentNode = document.getElementById("Reviews");
    reviewsParentNode.insertBefore(newReview);
}

score 0 · Accepted Answer · answered Nov 20 '22 at 15:50

The key issue is that every time you call your function you're replacing the whole HTML of your reviews element with the new data when you should be adding/appending the new data to the existing HTML.

How you append that data really depends on the approach that you want to take. Note: in these examples I'm assuming the values of the inputs without creating the form, and just showing the function you might use.

You could, as has been suggested, just concatenate the data with +=. But the downside to this is that the data won't be styled in any way; you'll just be left with a long string of text. Also it's considered bad practice to do that.
You could manipulate the DOM directly by creating a series of elements that you attach the input values which you then append to the reviews element.

// Cache the reviews element
const reviews = document.querySelector('.reviews');

// Accept some values
function addReview({ name, email, text }) {
  
  // Create a review element and attach a class to it
  const reviewEl = document.createElement('section');
  reviewEl.className = 'review';
  
  // Create a header element...
  const headerEl = document.createElement('header');
  
  // ...and an anchor element, and add the email and name
  const anchorEl = document.createElement('a');
  anchorEl.href = email;
  anchorEl.textContent = name;
  
  // Finally create a text element for the review text,
  // and add the text to it's textContent property
  const textEl = document.createElement('section');
  textEl.textContent = text;
  
  // Append all the elements together
  headerEl.append(anchorEl);
  reviewEl.append(headerEl);
  reviewEl.append(textEl);
  
  // And finally add the review to the reviews element
  reviews.append(reviewEl);

}

addReview({ name: 'Bob', email: 'bobsemail@bob.com', text: 'This is Bob\'s review.' });
addReview({ name: 'Kate', email: 'katesemail@kate.com', text: 'This is Kate\'s review.' });
addReview({ name: 'Moses', email: 'mosesemail@moses.com', text: 'This is Moses\' review.' });

.review { border: 1px solid #444; padding: 0.5em; }
.review section { margin-top: 0.25em; }
.review:not(:first-child) { margin-top: 0.5em; }

<div class="reviews"></div>

Or, and perhaps the simplest, is to use template strings to create the HTML in one easy to understand way, and then insert that HTML on the reviews element.

const reviews = document.querySelector('.reviews');

function addReview({ name, email, text }) {
  const html = `
    <section class="review">
      <header>
        <a href="mailto:${email}">${name}</a>
      </header>
      <section>${text}</section>
    </section>
  `;
  reviews.insertAdjacentHTML('beforeend', html);
}

addReview({ name: 'Bob', email: 'bobsemail@bob.com', text: 'This is Bob\'s review.' });
addReview({ name: 'Kate', email: 'katesemail@kate.com', text: 'This is Kate\'s review.' });
addReview({ name: 'Moses', email: 'mosesemail@moses.com', text: 'This is Moses\' review.' });

.review { border: 1px solid #444; padding: 0.5em; }
.review section { margin-top: 0.25em; }
.review:not(:first-child) { margin-top: 0.5em; }

<div class="reviews"></div>

Trying to add aditional comments

3 Answers3