在数组中显示用户输入答案

【问题标题】：Display user inputs in an array在数组中显示用户输入
【发布时间】：2022-11-04 21:35:38
【问题描述】：

我需要为接受用户输入并将其显示在 cmets 部分的输入字段下方的分配创建一个 cmets 板，这是我已经到达的地方，但我不知道如何完成脚本以便输入的数据是显示

function sendMessage() {

    let emailjs = email.value;
    email.value = ""

    let handlejs = handle.value;
    handle.value = ""

    let messagejs = message.value;
    message.value = ""

    let userobject = {
        emailjs,
        handlejs,
        messagejs
    };

    let array = [];
    array.push(userobject);
    comments.innerHTML = 'this is the bit I need help with';
}

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Comment section</title>
      <link rel="stylesheet" href="style.css">
      <script src="code.js"></script>
   </head>
   <body>
      <div class="alert"> Your message has been sent</div>
      <h1> Spartak Swinford FC - Comment Section</h1>
      <form id="contactform" action="#">
      <fieldset>
         <legend>Message</legend>
         <span>Email : </span><input type="text" id="email" placeholder="Email"><br>
         <span>Handle: </span><input type="text" id="handle" placeholder="Handle"><br>
         <span style="position: absolute;"></span>
         <textarea name="message" id="message" cols="50" rows="8">Enter your message...</textarea>
         <br>
         <button id="btn" type="button" onclick="sendMessage()">Post</button>
         <div id="clientSideContent"></div>
      </fieldset>
      </form>
      <h1>Comments</h1>
      <div id="comments"> </div>
   </body>
</html>

【问题讨论】：

最简单的方法是将数组加入字符串，然后将内部 html 设置为该字符串。 comments.innerHTML = array.join(",");

标签： javascript html

【解决方案1】：

这就是你可以做到的方式，你可以添加li 和所有你自己。

let email = document.getElementById("email");
let handle = document.getElementById("handle");
let message = document.getElementById("message");
let comment = document.getElementById("comments");
let button = document.getElementById("btn");

button.addEventListener("click", sendMessage);

function sendMessage() {
  let emailjs = email.value;
  email.value = ""

  let handlejs = handle.value;
  handle.value = ""

  let messagejs = message.value;
  message.value = ""

  let demo = emailjs+ " " + handlejs + " " + messagejs;
  comment.innerHTML += demo;
}

<div class="alert"> Your message has been sent</div>
<h1> Spartak Swinford FC - Comment Section</h1>
<form id="contactform" action="#">
  <fieldset>
    <legend>Message</legend>
    <span>Email : </span><input type="text" id="email" placeholder="Email"><br>
    <span>Handle: </span><input type="text" id="handle" placeholder="Handle "><br>
    <span style="position: absolute;"></span>
    <textarea name="message" id="message" cols="50" rows="8" placeholder="Enter your message..."></textarea>
    <br>
    <button id="btn" type="button">Post</button>
    <div id="clientSideContent"></div>
  </fieldset>
</form>
<h1>Comments</h1>
<div id="comments"> </div>

【讨论】：