时间戳

首页 > 解决方案 > 如何从输入（HTML）中获取数据以注册为按钮？

javascript - 如何从输入（HTML）中获取数据以注册为按钮？

问题描述

我想做的事的照片

如您所见，在您输入输入后，我正在尝试将房间注册为按钮。我手动制作了这些按钮，但我如何才能以一种为每个房间输入创建一个按钮的方式对其进行编码。

我正在使用带有 node.js 和 socket.io 的 javascript。

标签： javascripthtmlnode.jsbuttoninput

解决方案

const rooms = [
  {id: 24, name:"Music", members:4670},
  {id: 17, name:"Family", members:77},
  {id: 10, name:"Study", members:9},
];

const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

const roomButton = (room) => ELNew("button", {
  className: "btn",
  textContent: room.name,
  title: `Members: ${room.members}`,
  onclick() { console.log(room.id); },
});

const roomButtons = () => rooms.reduce((DF, room) => 
  (DF.append(roomButton(room)), DF)
, new DocumentFragment());

// Example:
document.querySelector("#roomsButtons").append(roomButtons());
<div id="roomsButtons"></div>

推荐阅读