如何针对一个随机生成的数字？

Question

我有一个脚本，当加入时随机生成一个房间id。我想通过点击一个按钮复制那个ID。这将是一个简单的工作输入元素，然而，我不知道如何目标随机ID编辑和操作它。我怎么能那么做？

null

js lang-js prettyprint-override">function createRoom(){

    var option = document.createElement("option");
    option.text = makeid(10);
    roomSelection.add(option);
    window.sessionStorage.setItem("arhostas", 1);
}

function makeid(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
 }
 
 var roomUrl = document.createElement("div");
roomUrl.innerText = `Room id: ${room}`
roomID.append(roomUrl)

<div id='roomId'></div>

null

加入房间时已生成房间ID。我只需要把它拷贝到剪贴板上。添加“createroom”代码。

Answer 1

navigator.clipboardAPI是复制到剪贴板navigator.clipboard的现代方法。由于安全原因，选项卡必须处于活动状态，您才能将其复制到剪贴板。因此无法复制此代码段中的id

您创建的元素room_id_div不是有效的HTML元素。所以我将其改为普通的div标记。

我创建了一个按钮来监听单击，然后复制文本。

null

js prettyprint-override">const length = 7;
const button = document.getElementById('copyId');
const roomID = document.getElementById('roomId');
const roomUrl = document.createElement("div");

function makeId(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }

  return result;
}

button.addEventListener('click', _ => {
  roomID.innerHTML = '';
  const id = makeId(length);
  navigator.permissions.query({
    name: "clipboard-write"
  }).then(permission => {
    if (permission.state == 'granted') navigator.clipboard.writeText(id).then(_ => alert('Successfully copied to clipboard!!'), _ => alert('Error copying id to clipboard'));
    else alert('Error copying id to clipboard');
  });

  roomUrl.innerText = `Room id: ${id}`;
  roomID.append(roomUrl);
});

<div id='roomId'></div>
<button id="copyId">Generate and Copy Id</button>

Answer 2

room_id_div不是有效的HTML元素。您可以使用object.assign一次性创建一个元素并为其分配一些属性。如果要在创建的元素的innertext中使用id，则必须单独创建（随机）id。

或者，您可以在css(:before)中使用伪选择器设置div的内容。在这种情况下，您不需要单独创建随机id。缺点是不能选择div中的文本（因此，不能复制到剪贴板）。

这两个都在此片段中演示：

null

document.addEventListener("click", handle);
document.addEventListener("change", handle);

function handle(evt) {
  const origin = evt.target;
  if (/Room$/.test(origin.id)) {
    return origin.id === "fromIdRoom" ? 
      createRoom1() : createRoom2();
  } else if (origin.id === "roomSelector") {
    if (origin.value !== "-1") {
      document.querySelectorAll("#roomId1 div")
        .forEach(elem => elem.style.backgroundColor = "");
      document.querySelector(`#${origin.value}`).style.backgroundColor = "#FFFFC0";
    }
  }
}

// room id from css pseudo :before
// use [makeId] directly
function createRoom1() {
  const roomParent = document.querySelector("#roomId1");
  roomParent.append(
    Object.assign(
      document.createElement("div"), {
        id: `X${makeId(15)}`, // NOTE: id can not start with a number
      })
  );
  const idNow = roomParent.querySelector("div:last-child").id;
  roomParent.querySelector("select").append(
    Object.assign(
      document.createElement("option"), {
        value: idNow,
        textContent: idNow
      })
  );
}

// room id within innerText
// you'll need to pre-assign [room]
function createRoom2() {
  const room = `X${makeId(15)}`; // NOTE: id can not start with a number
  document.querySelector("#roomId2").append(
    Object.assign(
      document.createElement("div"), {
        id: room,
        innerText: `Room id: ${room}`,
      })
  );
}

function makeId(length) {
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

#roomId1 div:before {
  content: 'Room id from css: 'attr(id);
}

html prettyprint-override"><p>
  <button id="fromIdRoom">create create a room within #roomId1</button>
  <button id="createRoom">create a room within #roomId2</button>

</p>
<div id='roomId1'>
  <select id="roomSelector">
    <option value="-1">Select room</option>
  </select>
</div>

<div id='roomId2'></div>