Trying to add aditional comments-CodePudding

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 >

    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>

CodePudding user response：

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.

CodePudding user response：

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);
}

CodePudding user response：

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: '[email protected]', text: 'This is Bob\'s review.' });
addReview({ name: 'Kate', email: '[email protected]', text: 'This is Kate\'s review.' });
addReview({ name: 'Moses', email: '[email protected]', 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 ></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 >
      <header>
        <a href="mailto:${email}">${name}</a>
      </header>
      <section>${text}</section>
    </section>
  `;
  reviews.insertAdjacentHTML('beforeend', html);
}

addReview({ name: 'Bob', email: '[email protected]', text: 'This is Bob\'s review.' });
addReview({ name: 'Kate', email: '[email protected]', text: 'This is Kate\'s review.' });
addReview({ name: 'Moses', email: '[email protected]', 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 ></div>