클립보드로 복사하는 버튼 만들 때 에러가 나는 경우

아래 함수에 link가 있구요.

버튼을 클릭했을 때 변수를 클립보드로 복사하려고 합니다.

function displayUser(user) {
    
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
 "<button onclick="copyToClipboard(link)"> Copy Link</button>"`;
var link = `${user.Url}`;

grid.innerHTML += text;
}

function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

아래 함수를 인터넷에서 찾아서 써서 해보려 했는데요.

function copyToClipboard(link){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=link;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);

버튼을 클릭하면 "link is not defined"라고 표시됩니다.

해결 방법 아시는 분 있을까요?

javascript

2022-05-15 21:10

2 Answers

다음처럼 해보세요.

function displayUser(user) {
    
    var link = user.Url;
    var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
    "<button onclick="copyToClipboard(${link})"> Copy Link</button>"`;

    grid.innerHTML += text;
}

function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

link 변수를 나중에 정의하면서 올바르게 포함시키지 않았기 때문에 link 변수에 액세스할 수 없습니다.

2022-05-15 21:27

이렇게 하면 될 거 같네요.

이렇게 하면 클립보드로 복사가 작동하지는 않지만, 이렇게 하면 원하는 대로 함수에 복사를 전달할 수 있습니다.

function displayUser(user) {
    
    var grid = document.getElementById("testgrid");
    console.log(grid);

    var link = `${user.Url}`;
    var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br> 
     <button onclick="copyToClipboard('${link}')"> Copy Link</button>`;
    
    grid.innerHTML += text;
}
    
function user(data) {
    data.result.roomList.forEach((user) => displayUser(user));
}

function copyToClipboard(link){
    console.log(link);
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=link;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

displayUser({Url: "bla", country: "blabla"});

2022-05-15 21:28

If you have any answers or tips

Popular Tags

python x 4625

android x 1591

java x 1472

javascript x 1386

c x 903

c++ x 821

php x 684

ruby-on-rails x 679

python3 x 645

html x 635