试图添加修改性评论

Question

因此，我刚刚开始学习html和javascript，并试图创建一个注释页面。然而，我只能让页面一次显示一个评论，我希望能够添加进项评论。有人能帮忙吗？

使用的部分代码

联署材料：

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>

Answer 1

关键问题是，每次调用函数时，您都要用新数据替换reviews元素的整个HTML，而此时应该将新数据添加到现有的HTML中。

如何附加数据实际上取决于您想要采取的方法。注意:在这些示例中，我假设输入的值不需要创建表单，而只是显示您可能使用的函数。

1. 正如建议的那样，您可以将数据与+=连接起来。但这样做的缺点是，数据不会以任何方式被样式化；您将只剩下一长串文本。同时，这也是被认为是不良做法做的。
2. 您可以通过创建一系列元素直接操作DOM，然后附加输入值，然后是元素。

​

// 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>

​

1. 或者，也许最简单的方法是使用模板字符串以一种简单易懂的方式创建元素，然后使用元素。

​

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>

​

Answer 2

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

您应该使用innerHTML+=而不是innerHTML = ...。这是你的错误。

Answer 3

我会为每次评审添加一个元素，如下所示

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