How to target a random generated number?

Question

I have a script that randomly generates a room id when joined. I want to copy that ID with a click of a button. It would be easy job with a input element, however, I don't know how to even target that random ID to edit and manipulate it. How could I do that?

 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>

Room ID is already generated when joined to the room. I just need to copy it to the clipboard somehow. Adding a "createRoom" code.

Answer 1

room_id_div is not a valid html-element. You can create an element and assign some properties to it in one go using Object.assign . If you want to use the id within the innerText of the created element, you'll have to create the (random) id separately.

Alternatively you can set the content of a div using a pseudo-selector in css ( :before ). In that case you don't need to create a random id separately. The downside is that the text within the div can not be selected (hence, not copied to the clipboard).

Both demonstrated in this snippet:

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

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

Answer 2

The navigator.clipboard API is the modern method for copying to the clipboard navigator.clipboard . The tab must be active for you to copy to the clipboard for security reasons. So you can't copy the id in this snippet

You created an element room_id_div that isn't a valid HTML element. So I changed it to a normal div tag.

I created a button to listen for click and then copy the text.

 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>