javascript - 如何从 onclick 事件中显示列和行中的数据

Question

我不知道如何显示来自输入 onclick 事件的数据。

数据来自用户的输入（书名）。

每次单击提交按钮时，我都想在屏幕右侧以有组织的方式显示这本书的名称（例如 3 列，一旦 3 列包含特定数据，然后我会在新行中继续显示）。

我需要它用于显示书籍和文本的目录 webapp。

我被困了很长时间，无法弄清楚如何......

对我的解释：一旦我点击提交，我希望这本书显示在左侧。一旦我们在左边有 3 本书（所以提交了 3 本书），我希望其他书显示在下面，并且每次达到 3 本书时都会创建一个新行。

谢谢您的帮助 ：）

穆罕默德·拉明。

标签： javascriptcssonclickgriddisplay

Answer 1

为简单起见，我只取了 1 input，您可以取尽可能多的并将其附加到list然后附加list到data-books

const button = document.querySelector("button");
const input = document.querySelector("input");
const dataBooks = document.querySelector(".data-books");
button.addEventListener("click", (e) => {
  const bookName = input.value;
  const list = document.createElement("li");
  list.textContent = bookName;
  dataBooks.appendChild(list);
  input.value = "";
  input.focus();
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div.form {
  padding: 1rem;
  background-color: blueviolet;
}

h2 {
  text-align: center;
  border-bottom: 1px solid gray;
  padding: 1rem;
  margin: 0;
}

ul.data-books {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2rem;
}

<div class="container">
  <div class="form">
    <input type="text" placeholder="book name" />
    <button> submit </button>
  </div>
  <div class="data">
    <h2> Books </h2>
    <ul class="data-books">
    </ul>
  </div>
</div>